处理Firefox和Internet Explorer的差异

这个问题是因为我刚刚发现我的网站在IE7和IE8中看起来还不错,具有兼容性模式,但在FF中它已经搞砸了.

什么是最好的方式去做.

单独的CSS文件？

谢谢,理查德

如果您的布局完全不同,最好的解决方案是返回并重新考虑您的布局/ CSS.老实说,我从来不需要两个样式表 - 一个用于FF,另一个用于IE.

一个非常有用的工具是"重置样式表",就像Eric Meyer提供的那样.这会将您的大部分元素重置为多个浏览器之间保持一致的状态.

周到和耐心的开发可以产生单个样式表(在这里简单化,不考虑reset.css,text.css等),这将适用于FF和IE.

我建议你下载Firebug,一个firefox插件,然后开始研究你的风格.安装IE Developer Toolbar也很有帮助- 有点像IE的Firebug.如果您想同时测试多个版本的IE,请查看IETester.

设计一个站点是一个繁琐的过程 - 不要采取捷径:)训练自己在布局方面要努力.不要妥协任何妥协 - 从长远来看它会让你受益匪浅!

许多跨浏览器问题相当于:您没有指定某些内容,并且不同的浏览器会做出不同的假设.因此:

声明有效的doctype

您的doctype告诉浏览器您将在代码中使用哪些规则.如果您没有指定,则浏览器必须猜测,并且不同的浏览器将以不同的方式猜测.

根据我的经验,"严格"的doctype使IE表现得更好(启用CSS之类的东西:IE7中div上的悬停选择器).

本文提供了有关do​​ctypes的良好背景知识.

验证您的HTML和CSS

您不必完美无缺,但验证是很好的反馈.正如杰夫所说:

了解规则和边界有助于您定义自己正在做的事情,并为您提供合法的弹药以达成一致或不同意.你可以做出明智的选择,而不是随意的"我只是这样做而且它有效".

想象一下,你打开一个段落标签,从未关闭它.如果你打开一个列表标签,是不是意味着它在段落内？验证将帮助您捕获,关闭标记并消除歧义.

考虑CSS重置

不同的浏览器采用不同的基线CSS规则 您可以通过明确解决前面的差异来帮助他们所有人采取相同的行动.编写CSS:The Definitive Guide的 Eric Meyer 使用了这个重置.

在多个浏览器中测试,最后处理IE

随时在多个浏览器中进行测试.通常,您会发现非IE浏览器的行为类似,IE是一种特殊情况 - 特别是如果您遵循上述建议.必要时,您可以在单独的样式表中添加IE hacks,并仅为IE用户加载它.

Quirksmode.com是一个搜索随机浏览器差异的好地方.