css - 我们可以在实践中使用 CSS 2.1 选择器吗？

Question

这个问题背后的罪魁祸首当然是IE6，（几乎）每个人都同意一个网站应该支持IE6，因为它被超过15%的访问者使用（对于雅虎来说，它仍然是一个A级浏览器）。

IE6 不支持 CSS 2.1，那么我们可以在样式表中使用 CSS 2.1 选择器吗？让我举个例子吧：

<body>
    <div class="header">
    </div>
    <div class="content">
        <h1>Title</h1>
        <p>First paragraph</p>
        <p>Second paragraph</p>
    </div>
    <div class="footer">
    </div>
</body>

我的 CSS 可能如下所示：

body > div {width: 760px;} /* header content and footer = 760px wide */
h1 + p { margin-top: 5px;} /* the first paragraph after the h1 tag should have a smaller margin */

但是 IE6 不会理解这一点，所以无论如何要与浏览器兼容，我应该这样写：

.header, .content, .footer  { width:760px; }

可能我必须给第一段一些类名并在我的css中定义它。我可以制作一个特定于定义这些规则的IE6 样式表，但这似乎是双重的（并且在第一段需要类名的情况下仍然无济于事）......

score 2 · Accepted Answer

如果您对 100% 支持 IE6 很认真，那么您应该避免使用无法使用的 CSS。使用这些花哨的选择器的原因之一是让你的生活更轻松，但如果你必须为 IE6 重写它们，它不会让你的生活更轻松。最后，像这样的花哨的选择器在 Firefox 中速度很慢，所以也许一起避免它们。

score 1 · Accepted Answer

如果您从渐进增强的角度来处理您的网站设计，那么您应该没问题，因为更现代的浏览器将获得比使用 ie6 的浏览器更好的体验。如果您只是想走捷径或节省开发时间，那么您必须选择 ie6 用户是否对您的网站重要。

score 1 · Accepted Answer

我认为“支持” IE6 的概念是错误的想法，如果我们对此说不，我们只是不允许 IE6 用户访问我们的网站和内容吗？当然不是。所以真正的问题是，你想花多少时间让你的网站在 IE6 上的体验与其他浏览器一样。

我自己的观点是我“支持” IE6，因为 IE6 的用户将能够访问网站的所有内容及其所有功能，但他们可能无法获得与 Firefox 3 用户相同的视觉或交互体验。

所以回答你的问题，是的，我们可以使用 CSS 2.1 和 3.0 选择器来实现某些效果，只要 IE6 的内容仍然存在并且具有可接受的视觉外观。可接受的内容取决于项目（可能还有客户！）。

您的示例很好地展示了这一点：

p { margin-top: 10px; }
h1 + p { margin-top: 5px;} /* the first paragraph after the h1 tag should have a smaller margin

在这里，IE6 仍然会获取段落内容，并且它们之间仍然会有所有重要的空白，只是不会在第一个空白处获得减小的间距。对于减少 HTML 中的混乱，这是 IMO 的一个公平妥协。

另一个很好的例子是圆角。您可以在 Firefox 和 Safari 中使用-moz-border-radius和-webkit-border-radius来获得圆角，从而增强您网站的视觉体验，但 IE 用户仍然可以获得内容，尽管具有普通的旧方角（然后有很多 JavaScript 解决方案可以为人们实现这一点启用 JavaScript）。

这都将归入渐进增强的标题下

score 0 · Accepted Answer

像 JQuery 这样的Javascript 。
CSS 黑客。但我不建议这样做。因为它不是 W3C 标准。
CSS 类名。通过使用 CSS Classname 替换 CSS Selector。

score 0 · Accepted Answer

正如您已经说过的，您的浏览器受众将决定您所支持的内容，即使是像 w3schools 这样的“技术”网站仍然报告 IE6 的市场份额为 17%。

也就是说，如果你要支持它，显然你需要替代品。

我昨天在stackoverflow上阅读了另一个关于仅针对 IE8 的有趣线程，我怀疑如果您可以针对它们，支持每个浏览器会更容易。我在 .net 环境中，并使用有人在该线程的一半发布的方法，以便我的 CSS 选择器可以很容易地变成：

body > div {width: 760px;}
.IE6 div.header, .IE6 div.content, .IE6 div.footer { width: 760px; }

显然，您会找到自己定位浏览器的方式，但 CSS 将等同于类似的东西。

score 0 · Accepted Answer

决定是否忽略 IE6 的不是开发者而是网站所有者。您应该向网站所有者提供该特定网站的统计信息，然后做出决定。

如果您或所有者决定不牺牲 IE6 人员，那么使用那些花哨的选择器毫无意义。有很大的缺点，目前还没有上涨空间。

score 0 · Accepted Answer

对于我网站上的每个 IE6 用户，我都收到了大红色警报，说他们的浏览器很古老，他们应该下载真正的浏览器，比如 Firefox；] 这就是解决方案。如果网站管理员不告诉用户，谁会？

css - 我们可以在实践中使用 CSS 2.1 选择器吗？

7 回答 7

Related

Reference