3

像每个 Web 开发人员一样，我通常每周至少诅咒 IE6 的创建者一次犯规和过早死亡。然而，我的公司要求我继续支持最讨厌的浏览器。

我今天的问题是想首先在我的 CSS 中使用通配符，然后尝试使用“继承”属性。IE7-都不支持这两者。

我真的，真的很想拥有良好的、结构良好的、适当继承的 CSS（面向对象的 CSS，如果你喜欢这个流行词），但我有一种在我的胃里迟早会下沉的感觉是自定义目的和基于位置的类。

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

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

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

4

7 回答 7

9

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

然而，事情显然在改善，支持 IE6/7 并且仍然使用正确的 CSS 设计是可能的。只是……很难。看看这个布局引擎和 CSS 支持的比较。如果您查看总体趋势，您会发现大多数浏览器（甚至 IE）从长远来看确实倾向于遵守既定标准，只是一些浏览器在引入标准后比其他浏览器需要更长的时间来实施标准。

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

因此，除了使用丑陋的 CSS hack 之外，唯一的选择是坚持使用完善的旧规范。那么问题就不再是在支持特定浏览器的同时尝试符合 web 标准了。相反，问题只是试图抵制使用最新和最伟大的 CSS 功能的冲动。

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

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

于 2009-04-20T00:33:17.203 回答
3

一点也不——您可以通过条件注释和 IE 特定样式表来弥补 IE 的缺点，同时将您的“漂亮”样式表提供给其他浏览器。

我发现有帮助的其他方法是使用CSS reset。虽然这并不能解决 IE 的所有问题，但它确实为您提供了一个很好的工作基准。

于 2009-04-19T23:50:16.077 回答
1

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

使用条件注释是为表现良好的浏览器提供干净的样式表并在 IE 上仍然使用美观的最干净的方式。这就是我使用的，只需要几行的 1 个 css 文件来修复我的网站外观。

跨浏览器一致外观和感觉的黑暗路径是css hacks，但我强烈反对使用它，特别是现在有一段时间我们必须针对三个不同的 IE（6、7 和 8）

通常，如果您使该样式在 FF 和 Chrome/Safari 中都可以使用，那么 IE 只需进行几次更正即可。

于 2009-04-20T00:03:08.213 回答
1

有一个很棒的网站Position Is Everything详细说明了 FF、IE 和 Safari 如何符合标准 CSS。在该站点上，您将找到大多数针对 IE 的变通方法/解决方法，它们将减轻您为 CSS 编写如此多条件代码的需要。

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

于 2009-04-20T00:25:18.127 回答
1

当然不是。如果您确保它们以“标准”模式而不是“怪癖”模式呈现页面，那么许多常见的 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 < 7 中用 GIF 替换 PNG 背景 - 使用它们没有任何问题，我只是发现当您必须定义相同的外观时，它会使事情变得不必要地复杂化对象在两个不同的地方。有了上面的三个技巧和一点耐心，您应该能够使用单个样式表创建基于 CSS 的布局，该样式表在 IE 6/7 中的渲染效果与在 Mozilla/Webkit 中一样好。

快乐编码！

于 2009-04-20T10:10:20.390 回答
0

IE 6 确实限制了我们的能力。

正是缺乏对高级选择器的支持（并且继承——IE 7 也不支持）这让我很感动。仅仅拥有子选择器和属性选择器就很好了，这确实减少了我们必须编写和维护的代码量。您只能通过复制样式来解决对它们缺乏支持的问题，因此您最终不得不像它们不存在一样编写代码。

叹。

于 2009-12-21T00:28:17.570 回答
-1

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

于 2009-04-20T00:02:48.353 回答