Question

与每个网络开发者一样，我通常每周至少一次诅咒IE6的创造者，造成犯规和不合时宜的死亡。然而，我的公司要求我继续支持那些最讨厌的浏览器。

我今天的问题一直是想在我的CSS中首先使用通配符，然后尝试使用“inherit”属性。这些都不受IE7支持 - 。

我真的，真的，想要拥有良好的，结构良好的，正确继承的CSS（面向对象的CSS，如果你喜欢那个流行语），但我的胃里有这种下沉的感觉，迟早，它是必须是定制目的和基于位置的类。

这提出了一个问题：鉴于IE在处理许多CSS概念方面有多么糟糕，是否有可能在拥有结构良好的CSS文档的同时充分支持此浏览器？

只是为了澄清：我知道有很多方法（一些是合法的，一些不那么方式）来解决IE6和7中发现的错误和缺点。我真正要问的是“如果你想要有一个正确继承的单一，写得很好的样式表，你必须在它之间做出选择并在所有浏览器中保持一致的外观吗？“希望这是有道理的。

换句话说，我应该坚持我的原则并编写好的样式表，还是应该接受IE6仍然享有非常高的（最后一次计算的20％）市场份额并让我自己支持它？或者是否有一些快乐的媒介允许我最小化我的HTML和CSS上的frankenstein手术，同时仍然在IE中取得一些可观的结果？

Answer 1

公平地说，你不能把它归咎于IE（虽然微软肯定是迄今为止最糟糕的违法者）。这么大的一部分问题和快速发展的标准是，及时完美实施太多的移动目标。不幸的是，Web浏览器的发布周期与新Web规范的发布不一致。因此，所有浏览器开发人员都可以尝试从最新的W3C建议中实现尽可能多的功能，选择他们认为将是最常用的功能。

然而，事情正在明显改善，可能支持IE6 / 7并且仍然使用适当的CSS设计。这只是......很难。看看this comparison of layout engines & CSS support。如果你看一下整体趋势，你会发现大多数浏览器（甚至是IE）从长远来看都倾向于遵循既定的标准，它只需要一些浏览器比其他浏览器更长的时间来实现标准。

有时候并不是说一个浏览器比另一个浏览器“更少”符合标准。对于新标准，问题通常是不同的开发团队选择采用新规范的不同部分。因此，即使CSS3已经开始被大多数浏览器实现，我们可能必须等到CSS4发布之后才能看到所有主要渲染引擎的一致支持。如果您现在尝试使用最新的CSS3功能，那么您将很难在所有主流浏览器之间建立兼容性。但是如果你使用的是CSS1中引入的功能，那就没问题了。

因此，除了使用丑陋的CSS黑客外，唯一的选择是坚持使用完善的旧规范。然后，问题不再是 在支持特定浏览器时尝试符合Web标准 。相反，问题只是 试图抵制使用最新＆amp;最棒的CSS功能 。

除此之外，我看到这种反复出现的情况的唯一永久性解决方案是W3C 优先新引入的规范的不同部分，以便新功能可以在所有同步的离散阶段中实现主流浏览器。因此，例如，语法规则可能被赋予最高优先级以及其实现的设定截止日期。之后将进入第二阶段，这可能是元素和属性选择器，依此类推。

这需要W3C和开发团队之间的巨大合作，但这是值得的。毕竟，用户和Web开发人员没有利用IE来实现CSS3的一个功能子集，而Firefox实现了不同的子集，而Webkit浏览器则是另一个子集。在所有主要渲染平台实际上标准化之前，“标准”是没有用的。 每个浏览器最好支持更少的新功能但是它们都具有相同的功能，而不是单独引入大量自己不受普遍支持的功能。

Answer 2

完全没有 - 您可以使用conditional comments和IE特定的样式表来弥补IE的缺点，同时为其他浏览器提供“漂亮”的样式表。

我发现的其他帮助是使用CSS reset。虽然这不会解决IE的所有问题，但它确实为您提供了良好的基线。

Answer 3

最烦人的IE6 功能是它的盒子模型处理。在定位框时应该坚持使用边距，并尝试使用相对字体大小来允许在IE上调整字体大小。其余的怪癖是well documented。

使用conditional comments是一种最简洁的方法，可以为表现良好的浏览器提供干净的样式表，并且仍然可以在IE上使用它。这就是我使用的，只需要几行的1个css文件来修复我的网站的外观和感觉。

交叉浏览器的 dark 路径一致的外观＆amp;感觉是css hacks，但我强烈反对它的使用，特别是现在有一段时间我们必须针对三种不同的IE（6,7＆amp; 8）

通常情况下，如果你在FF和Chrome / Safari中都能使用这种风格，IE只是对正确的一些修正。

Answer 4

有一个很棒的网站Position Is Everything详细介绍了FF，IE和Safari如何符合标准CSS。在该站点，您将找到IE的大多数变通方法/治疗方法，这将减少您为CSS编写如此多条件代码的需要。

您还需要查看A List Apart以了解有关CSS和IE的更多信息。关于CSS的无表格布局也有很棒的文章，处理IE中的高度错误等等。祝你好运 - IE 6真的很糟糕。

Answer 5

当然不是。如果确保它们以“标准”模式呈现页面而不是“怪癖”模式，则可以解决许多常见的IE CSS问题。为此，您必须在页面顶部提供有效的doctype语句，例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

正如其他人指出的那样，另一个好主意就是用一个片段开始你的样式表，删除所有填充和边距，如下所示：

*,html {
margin: 0;
padding: 0;
}

最后，IE中基于CSS的布局的一个常见问题是，当你期望时，不会发生浮动的清除。这与IE中名为“hasLayout”的隐藏对象属性有关;只有“具有布局”的对象才能正确地环绕并包围浮动的子对象。只需为它们指定至少一个维度，就可以轻松确保容器“具有布局”：

height: 1%;
width: 100%;
zoom: 1;

我个人不使用条件IE样式表，除了一件事：在IE中用GIF替换PNG背景＆lt; 7 - 使用它们没有任何问题，我只是发现当你必须在两个不同的地方定义同一个对象的外观时，这会使事情变得复杂。通过上面的三个提示和一点耐心，您应该能够使用单个样式表创建基于CSS的布局，这些样式表在IE 6/7中与在Mozilla / Webkit中一样呈现。

快乐的编码！

Answer 6

IE 6确实限制了我们可以做的事情。

缺乏对高级选择器的支持（并且继承 - IE 7也不支持），这些都是我的选择。只需拥有子选择器和属性选择器就可以了，这确实减少了我们必须编写和维护的代码量。您只能通过复制样式来解决对它们缺乏支持的问题，因此您最终必须将代码视为不存在。

叹息。

Answer 7

仅遵循使用IE6和Chrome（或Webkit）正确呈现的在线CSS教程。如果它在两者中看起来都是正确的，它可能在（几乎）所有浏览器中都是正确的。

好的CSS设计和IE6 / IE7是否支持互斥？

7 个答案: