Css 处理Firefox和Internet Explorer'；差异

这个问题是因为我刚刚发现，我的网站在IE7和IE8兼容模式下看起来还不错，但在FF中一切都搞砸了

最好的办法是什么

单独的CSS文件

---

谢谢，Richard

只为css中特定于浏览器的部分提供单独的文件。并使用html条件语句在它们之间切换

<link type="text/css" href="style.css" />
<!--[If IE]>
    <link type="text/css" href="IEHacks.css" />
<![endif]-->
<!--[if !IE]>
    <link type="text/css" href="NonIEHacks.css" />
<!--<![endif]-->

---

关于条件注释，包括可接受的测试值列表

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

一个非常有用的工具是“重置样式表”，如。这会将大部分元素重置为多个浏览器之间一致的状态

经过深思熟虑和耐心的开发可以产生一个单一的样式表（此处过于简单，不考虑reset.css、text.css等），它将同时适用于FF和IE

我建议你下载，并开始你的工作方式，通过你的风格。如果你想同时测试IE的多个版本，那就去看看吧

---

设计一个网站是一个乏味的过程——不要走捷径：）当涉及到布局时，训练自己变得困难。不要满足于任何妥协——从长远来看，这会让你受益

通常有多种方法使css与这两种浏览器兼容。这需要一点时间，但使以后的维护更容易。因此，如果您有时间，我建议您设法以这种方式实现所有元素

我经常在对中对象时遇到这种情况。最近，我在web门户的表方面遇到了一些问题。在谷歌上搜索“css定心表”就可以了。使用同样的方法，您应该能够找出如何协调浏览器差异。

看在上帝的份上（以及您的发际线），首先在FF/Webkit中开发，然后进行调整，使其在IE家族中发挥作用

---

当需要时，我更喜欢CSS文档（*html.foo）中的hacks，而不是条件注释，因为将MS特定的标记放入我的html中的想法让我感到不安

首先，通过以下命令运行css。这将帮助您确保您的css与支持浏览器的标准兼容，接受它提供的任何建议以改进您的css。一旦您通过css验证程序，您就可以查看是否存在特定于浏览器的错误。

很多跨浏览器问题都是这样的：您没有指定某些内容，不同的浏览器会做出不同的假设。因此：

声明有效的doctype doctype告诉浏览器您将在代码中使用哪些规则。如果不指定，浏览器必须猜测，而不同的浏览器将以不同的方式猜测

根据我的经验，“严格”的doctype使IE表现得更好（在IE7中在div上启用CSS:hover选择器）

提供良好的doctype背景

验证您的HTML和CSS 你不必把每件事都做到完美，但验证是很好的反馈。作为：

了解规则和界限有助于你定义你在做什么，并为你同意或不同意提供合法的弹药。你可以做出明智的选择，而不是随机的“我只是这么做，它就行了”的选择。 想象一下，您打开了一个段落标记，但从未关闭它。如果你打开一个列表标签，你的意思是它是否在段落内？验证将帮助您捕获该信息、关闭标记并消除歧义

考虑CSS重置 不同的浏览器采用不同的基线CSS规则。你可以通过事先明确地消除差异来帮助他们采取相同的行动。作者埃里克·迈耶（Eric Meyer）使用

在多个浏览器中测试，最后处理IE 在多个浏览器中进行测试。通常，你会发现非IE浏览器的行为类似，IE是一个特例——特别是如果你遵循上面的建议。必要时，您可以在单独的样式表中添加IE hack，并仅为IE用户加载它

---

是查找随机浏览器差异的好地方。

为了获得最佳效果，请在Firefox中进行开发（因为它符合标准），并定期跨浏览器检查IE的不同版本，以确保它也能正常工作

---

IE不需要一个完全独立的CSS文件，但在复杂的布局中，你可能需要一小部分覆盖规则来让IE正常工作——只向IE公开这些规则。永远不要使用CSS黑客，它们是不必要的，而且容易出错

清除所有样式并使每个浏览器都成为一块空白板是理想的，应该这样做，但为每个浏览器编码是不可能的。除非你将所有内容都编码为基于像素的，否则你无法创建一个在每个浏览器中看起来100%完全相同的CSS网站，即使这样，你最终也会遇到基于IE对填充和边距的解释的问题。像素并不总是像素

这就是说，我的解决方案，作为一个CSS实现者，从一开始，就是首先清除主CSS文件中的所有填充和边距，这会导致大多数问题

* { padding: 0; margin: 0; }

然后像平常一样创建你的网站——理想的情况是最初为Firefox编码，因为有一些黑客可以用于Safari和所有版本的IE。根据“像IE一样渲染”是不可接受的。同时在IE6、7、8（必要时使用IETester）、Firefox和Safari中检查您的站点。尽量多做一些小改动，使它们看起来非常接近。然后着手解决剩余的小问题（此时，每个浏览器可能只有一个或两个，如果有的话）

IE 6

.iframestyle { width: 309px; height: 263px; }

IE 7

.iframestyle { width: 309px; margin-top: 0px; }

IE 8

.iframestyle { width: 305px; margin-top: 0px; }

希望这有助于更好地显示我的意思（是的，在IE 8中宽度为h）

.iframestyle { width: 309px; margin-top: 0px; }

.iframestyle { width: 305px; margin-top: 0px; }