`内容：''` vs `内容：无`

Question

我正在阅读 Eric Meyer 的 CSS Reset 并看到了这一点：

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

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

Answer 1

迈耶将那个版本的 blockquote/q 重置样式归功于保罗·卓别林 (Paul Chaplin)。

卓别林关于该主题的帖子包含以下样式块，并附有有用的注释。

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：也没有，因此需要content: ""。

不过，该帖子是在 2008 年发布的，并且使用当前的 WebKit 浏览器（Safari 5.1 和 Chrome 12）进行了快速测试 ）表明 quotes: none 在两者上都可以正常工作。针对 WebKit 的 content: none 错误 仍然存在由于某种原因，虽然 quotes 属性的错误 最近已被关闭。

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