Chrome 中 :first-letter 的奇怪行为

Question

向具有包含 :first-letter 的 class 的元素添加看似无害的 class 会导致第一个字母在某些情况下呈现不正确。一个元素原来有class"unindent"，然后加入class"menuitemon"。 fiddle 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

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

我评论那两行的那一刻它工作正常

编辑

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

Codepen

Answer 2

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

幸运的是，不像, I was able to work around this very trivially by 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 3

伪元素(:first-letter)仅在父元素为块状容器框时有效（换句话说，对display:inline;元素的首字母无效）

您必须将 pseudo 的父级设置为

.parent {display:block}

Chrome 中 :first-letter 的奇怪行为

Odd behavior of :first-letter in Chrome

javascript

css

google-chrome

pseudo-element