Chrome 中 :首字母的奇怪行为

Odd behavior of :first-letter in Chrome

本文关键字：Chrome      更新时间：2023-09-26

将看似无害的类添加到具有 ：first 字母的类的元素中会导致在某些情况下，第一个字母呈现不正确。元素最初具有类"unindent"，然后添加了类"menuitemon"。小提琴 http://jsfiddle.net/pgf3reyt/4/显示这在一个元素上工作，而不是在另一个元素上工作。在火狐中工作正常。

p.unindent {
    color: #555555;
    background-color: #e6e6e6;
    border-bottom: 1px solid #d3d3d3;
    border-left: 1px solid rgba(0,0,0,0);  /* so things are the same size so we don't develop scroll bars*/
    border-right: 1px solid rgba(0,0,0,0);
    border-top: 1px solid rgba(0,0,0,0);
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 25px;
    padding-right: 5px;
    margin-top: 0;
    margin-bottom: 0;
}
p.unindent:first-letter {
    margin-left: -20px;
}
p.unindent.menuitemon {
    color: #e6e6e6;
    background: #555555;
    border: 1px solid #222222;
    border-radius: 4px;
}

有人可以指出我可能做错了什么导致这种情况吗？

你没有做错任何事。显然，Chrome 已经决定，对于版本 41，它将搞砸重新绘制:first-letter伪元素（顺便说一下，Chrome 因重绘错误而臭名昭著）。如果在标记中声明"menuitemon"类，则呈现具有负边距的伪元素没有问题。只有当你动态添加它时，它才会搞砸。

幸运的是，与影响 Chrome 39 -> 40 的级联分辨率错误不同，我能够通过在元素上使用负text-indent而不是在:first-letter上使用负边距来解决此问题：

p.unindent {
    text-indent: -20px;
    /* ... */
}
/*
p.unindent:first-letter {
    margin-left: -20px;
}
*/

伪元素（：首字母）仅在父元素是块容器框时才有效（换句话说，它不适用于显示的第一个字母：inline; 元素。

必须将伪的父级设置为 

.parent {display:block}

.menutitle {
    /* font-size: 1.2em; */
    font-weight: bold;
    /* font-style: italic; */
    margin-left: 0;
}

当我评论这两行时，它工作正常

编辑

不，它只解决了一半的问题

代码笔

相关文章：