` `content：''` vs ` `content: none`

Question

我读了Eric Meyer的CSS reset，看到了这个：

blockquote:before, blockquote:after,
q:before, q:after {
    /* ? */ content: '';
    /* ? */ content: none;
}

我假设一些浏览器支持content: ''和一些content: none，是这样的吗？哪种浏览器支持哪种浏览器？

Answer 1

Meyer将该版本的blockquote/q重置样式归功于Paul Chaplin。

卓别林关于这个主题的post包含以下样式块，并进行了有帮助的注释。

blockquote, q
{
    quotes: none;
}

/*
Safari doesn't support the quotes attribute, so we do this instead.
*/
blockquote:before, blockquote:after, q:before, q:after
{
    /*
    CSS 2; used to remove quotes in case "none" fails below.
    */
    content: "";
    /*
    CSS 2.1; will remove quotes if supported, and override the above.
    User-agents that don't understand "none" should ignore it, and
    keep the above value. This is here for future compatibility,
    though I'm not 100% convinced that it's a good idea...
    */
    content: none;
}

简而言之:大多数浏览器的当前版本只支持quotes: none样式，这样就不需要使用:before和:after选择器了。例外的是Safari/WebKit，它不尊重quotes: none。解决这个问题的下一种方法是使用:before/:after伪元素，但在撰写本文时，WebKit也不支持content: none，因此需要content: ""。

然而，这篇文章是在2008年发布的，在当前WebKit浏览器(Safari5.1和Chrome12)上运行的quick test显示，quotes: none在这两种浏览器上都可以很好地工作。由于某些原因，content: none bug against WebKit仍然是打开的，而bug for the quotes property最近刚刚关闭。

所以，长话短说，额外的样式似乎是为了支持旧版本的Safari (可能还有Chrome)。要确切地确定它们何时获得支持有点困难，但所有浏览器的当前版本似乎都能很好地处理quotes: none (和content: none)。