CSS `内容：''与`内容：无`
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6803250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
`content: ''` vs `content: none`
提问by Aaron Yodaiken
I was reading through Eric Meyer's CSS reset and saw this:
我正在阅读 Eric Meyer 的 CSS reset 并看到了这一点：
blockquote:before, blockquote:after,
q:before, q:after {
/* ? */ content: '';
/* ? */ content: none;
}
I assume that some browsers support content: ''and some content: none, is this the case? And which browsers support which?
我认为一些浏览器支持content: ''一些content: none，这样的话？哪些浏览器支持哪些？
回答by John Flatness
Meyer credits Paul Chaplin with that version of the blockquote/q reset styles.
Meyer 将那个版本的 blockquote/q 重置样式归功于 Paul Chaplin。
Chaplin's poston the subject contains the following style block, helpfully annotated.
卓别林关于这个主题的帖子包含以下样式块，有帮助的注释。
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;
}
To boil it down: current versions of most browsers simply support a quotes: nonestyle, which eliminates the need to use the :beforeand :afterselectors. The odd man out was Safari/WebKit, which didn't respect quotes: none. The next way to solve this was with the :before/:afterpseudo-elements, but at the time of that writing, WebKit didn't support content: noneeither, so content: ""was required.
归根结底：大多数浏览器的当前版本只支持一种quotes: none样式，从而无需使用:before和:after选择器。奇怪的人是 Safari/WebKit，它不尊重quotes: none. 解决这个问题的下一个方法是使用:before/:after伪元素，但在撰写本文时，WebKit 都不支持content: none，因此content: ""需要。
However, that post was in 2008, and a quick testwith current WebKit browsers (Safari 5.1 and Chrome 12) shows that quotes: noneworks fine on both. The content: nonebug against WebKitis still open for some reason, while the bug for the quotes propertywas closed fairly recently.
然而，那篇文章是在 2008 年发表的，对当前的 WebKit 浏览器（Safari 5.1 和 Chrome 12）进行的快速测试表明，quotes: none两者都可以正常工作。由于某种原因，content: none针对 WebKit的错误仍然存在，而引用属性的错误最近已关闭。
So, long story short, the extra styles appear to be there to support older versions of Safari (and possibly Chrome). It's a little more difficult to nail down exactly when they got support, but current versions of all browsers seem to deal with quotes: none(and content: none) just fine.
所以，长话短说，额外的样式似乎支持旧版本的 Safari（可能还有 Chrome）。确切地确定它们何时获得支持有点困难，但是所有浏览器的当前版本似乎都可以很好地处理quotes: none（和content: none）。
