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

Question

我正在阅读Eric Meyer的CSS重置并看到了：

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

我认为某些浏览器支持content: ''和一些content: none，是这种情况吗？哪些浏览器支持哪些？

Answer 1

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

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浏览器（Safari 5.1和Chrome 12）的quick test显示quotes: none在两者上都能正常工作。 content: none bug against WebKit由于某种原因仍然开放，而bug for the quotes property最近才关闭。

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