`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重置样式的版本.

卓别林关于这个主题的帖子包含以下样式块,有助于注释.

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/ :afterpseudo-elements,但在撰写本文时,WebKit也不支持content: none,因此content: ""需要.

但是,该帖子是在2008年,使用当前的WebKit浏览器(Safari 5.1和Chrome 12)进行的快速测试显示quotes: none两者都可以正常工作.由于某种原因,content: none针对WebKit的错误仍然是开放的,而引用属性的错误最近才被关闭.

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