代码之家 › 专栏 › 技术社区 › Gideon

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

css-selectors cross-browser css

Gideon · 技术社区 · 15 年前

这个问题的罪魁祸首当然是IE6,(几乎)每个人都同意一个网站应该支持IE6,因为超过15%的访问者使用它。( for Yahoo it is still an A-Graded browser )

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 stylesheet 定义这些规则的具体方法,但这似乎太复杂了(在第一段需要类名的情况下仍然没有帮助)。

7 回复 | 直到 12 年前

Bjorn 15 年前

如果你真的想100%支持IE6,那么你应该避免使用不适合它的CSS。使用这些花哨的选择器的原因之一是让你的生活更容易,但是如果你必须为IE6重写它们,就不会使你的生活更容易。最后,像这样花哨的选择器是 slow in Firefox 所以,也许只是一起避开它们。

Ronny Vindenes 15 年前

如果你从一个 progressive enhancement 透视图,那么你应该很好,因为更多的现代浏览器只会比那些使用IE6的浏览器获得更好的体验。如果你只是想偷工减料或节省开发时间,那么你必须做出选择,如果IE6用户对你的网站很重要或不是。

roryf 15 年前

我认为“支持”IE6的概念是错误的,如果我们拒绝,我们只是不允许IE6用户访问我们的网站和内容?当然不是。因此,真正的问题是,你想花多少时间让你的网站的体验和其他浏览器的IE6一样。

我自己的观点是,我“支持”IE6,因为IE6的用户能够访问一个站点的所有内容和所有功能,但他们可能无法获得与火狐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中的混乱,这是一个公平的折衷。

另一个很好的例子是圆角。你可以使用 -moz-border-radius 和 -webkit-border-radius 为了在firefox和safari中获得圆角,增强站点的视觉体验,但是IE用户仍然可以获得内容,尽管使用的是普通的方形角(然后有大量的javascript解决方案可以为启用了javascript的用户实现这一点)。

这一切都在标题下 Progressive Enhancement

Community Egal 7 年前

你的浏览器用户将决定你所支持的内容,正如你已经说过的那样,即使是像W3Schools这样的“技术”网站,3月份的IE6市场份额仍为17%。

也就是说,如果你想支持它,显然你需要其他的选择。

我昨天刚读到另一篇关于瞄准IE8的有趣文章 stackoverflow 我怀疑,如果你能瞄准每一个浏览器,支持它们会更容易。我在一个.NET环境中,使用的方法是有人在该线程中发布了大约一半的内容,这样我的CSS选择器就可以非常容易地成为:

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

很明显,你会找到自己的定位浏览器的方法,但是CSS将等同于类似的东西。

Soul_Master 15 年前

JavaScript 像jQuery一样。
CSS破解。 但我不建议。因为它不是W3C标准。
CSS类名。 通过使用css classname替换css选择器。

allesklar 15 年前

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

如果你或者你的老板决定不牺牲IE6的员工,那么使用那些花哨的选择器毫无意义。有很大的下行趋势,到目前为止还没有上行趋势。

Thinker 15 年前

对于我的网站上的每一个IE6用户,我都会收到一个红色警报,说他们的浏览器很古老,他们应该下载一个真正的浏览器,比如火狐;]这就是解决方案。如果网站管理员不向用户说,谁会说呢?