Question

向具有包含：first-letter的类的元素添加看似无害的类会导致第一个字母在某些情况下被错误地呈现。元素最初具有类“unindent”，然后添加类“menuitemon”。小提琴http://jsfiddle.net/pgf3reyt/4/显示了这个在一个元素上工作，而不是在另一个元素上工作。在Firefox中正常工作。

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;
}

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

Answer 1

你没有做错任何事。显然Chrome已经决定，对于版本41，它会搞砸重新绘制:first-letter伪元素（顺便说一句，Chrome是臭名昭着的用于重绘bug）。如果你宣布＆＃34; menuitemon＆＃34;在标记中的类，使用负边距渲染伪元素没有问题。只有当你动态添加它时它才会搞砸。

幸运的是，与cascade resolution bug that affected Chrome 39 -> 40不同，我能够通过using a negative text-indent on the element instead of a negative margin on :first-letter非常轻松地解决这个问题：

p.unindent {
    text-indent: -20px;
    /* ... */
}

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

Answer 2

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

当我评论这两条线它正常工作的那一刻

编辑

它只能解决问题的一半

Codepen

奇怪的行为：Chrome中的第一个字母

2 个答案: