这个问题是因为我刚刚发现我的网站在IE7和IE8中看起来没问题兼容模式，但在FF中却搞砸了。
最好的方法是什么。
单独的CSS文件？
谢谢，理查德
答案 0 :(得分：11)
如果您的布局完全不同，最好的解决方案是返回并重新考虑您的布局/ CSS。老实说，我从来不需要两个样式表 - 一个用于FF，另一个用于IE。
一个非常有用的工具是“重置样式表”，如the one Eric Meyer provides。这会将您的大部分元素重置为多个浏览器之间保持一致的状态。
周到和耐心的开发可以产生一个单独的样式表（在这里简单化，不考虑reset.css，text.css等），这将适用于FF和IE。
我建议你下载Firebug, a firefox addon，然后开始研究你的风格。安装IE Developer Toolbar也很有帮助 - 有点像IE的Firebug。如果您想同时测试多个版本的IE，请查看IETester。
设计一个网站是一个繁琐的过程 - 不要采取捷径:)训练自己在布局方面要努力。不要妥协任何妥协 - 从长远来看它会让你受益！
答案 1 :(得分：8)
许多跨浏览器问题相当于：您没有指定某些内容，不同的浏览器会做出不同的假设。因此：
您的doctype告诉浏览器您将在代码中使用哪些规则。如果您没有指定，浏览器必须猜测，不同的浏览器会以不同的方式猜测。
根据我的经验，“严格”的doctype使IE表现得更好（启用CSS之类的东西：在IE7中的div上悬停选择器）。
This article提供了关于doctypes的良好背景。
您不必完美无缺，但验证是很好的反馈。正如Jeff said：
了解规则和边界有助于您定义自己正在做的事情，并为您提供合法的弹药以达成一致或不同意。你可以做出明智的选择，而不是随意的“我只是这样做而且它有效”。
想象一下，您打开了一个段落标记，但从未关闭它。如果你打开一个列表标签，是不是意味着它在段落内？验证将帮助您捕获，关闭标记并消除歧义。
不同的浏览器采用不同的基线CSS规则。您可以通过明确解决前面的差异来帮助他们所有人采取同样的行动。编写CSS: The Definitive Guide的Eric Meyer使用this reset。
随时随地在多个浏览器中进行测试。通常，您会发现非IE浏览器的行为类似，IE是一种特殊情况 - 特别是如果您遵循上述建议。必要时，您可以在单独的样式表中添加IE hacks，并仅为IE用户加载它。
Quirksmode.com是搜索随机浏览器差异的好地方。
答案 2 :(得分：2)
为了爱上帝（以及你的发际线）首先在FF / Webkit中开发，然后进行调整以使其在IE家族中发挥作用。
如果需要，我更喜欢CSS doc（* html .foo）中的hacks来条件注释，因为将MS特定标记放入HTML中的想法让我感到不安。
答案 3 :(得分：2)
首先，通过css validator运行你的css。这将帮助您确保您的CSS与支持浏览器的标准兼容，并采取任何建议，以提高您的CSS。一旦你通过了css验证器，你就可以看到是否有任何特定于浏览器的错误。
答案 4 :(得分：1)
仅为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]-->
MSDN article关于条件评论，包括已接受测试值列表
答案 5 :(得分：1)
通常有一些方法可以使您的css符合这两种浏览器。这需要一点时间，但以后更容易维护。因此，如果您有时间，我建议您尝试找到以这种方式实现所有元素的方法。
当对象居中时，我经常遇到这种情况。最近，我特意遇到了一个Web门户表的问题。谷歌搜索“css中心表”产生了table centering using html or css。使用相同的方法，您应该能够弄清楚如何协调浏览器差异。
答案 6 :(得分：0)
清除所有样式并使每个浏览器都成为空白是理想的，应该这样做 - 但是编写每个浏览器根本不可能。除非您将所有内容编码为基于像素的内容，否则您无法创建一个在每个浏览器中看起来完全相同的CSS网站，即使这样，您最终也会遇到基于IE对填充和边距的解释的问题。像素并不总是像素。
也就是说，我的解决方案，从一开始就作为CSS实现者，首先要在主CSS文件中清除导致大多数问题的所有填充和边距。
* { padding: 0; margin: 0; }
然后像平常一样创建您的网站 - 理想情况下最初编写Firefox，因为您可以使用Safari和所有版本的IE浏览器。取决于“像IE一样渲染”是不可接受的。在IE 6,7,8中检查您的站点（如果必须，请使用IE Tester），Firefox和Safari同时进行。尝试进行尽可能多的微小更改，使它们看起来非常接近相同。然后进入并解决剩余的小问题（此时您可能只有一个或两个浏览器 - 如果有的话）。
<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->
创建包含整个网站所有样式的主样式表后，为IE 6,7和8的单独样式表创建条件注释，其中只覆盖那些需要覆盖的属性。
e.g。如果您需要将字体大小从普通的.8 em for Firefox调整为.7 em for IE 6，但您的特定选择器还有其他12个属性，只需将该单个属性覆盖在条件样式表中。不要使用所有属性覆盖整个样式。这是不必要的。
掌握CSS
.iframestyle { float: left; margin-right: 3px; width: 305px; }
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中，由于无论出于何种原因拾取其他IE样式，因此必须再次声明宽度。）
答案 7 :(得分：-1)
为了获得最佳效果，请在Firefox中进行开发（因为它符合标准）并定期在不同版本的IE中进行跨浏览器检查，以确保它在那里也能正常工作。
你不需要为IE提供一个完全独立的CSS文件，但是在复杂的布局中你可能需要一小组重写规则来使IE表现出来 - 只用{{3}将这些规则暴露给IE }。永远不要使用CSS hacks，它们是不必要的并且容易出错。