Chrome 中 :first-letter 的奇怪行为答案

【问题标题】：Odd behavior of :first-letter in ChromeChrome 中 :first-letter 的奇怪行为
【发布时间】：2015-05-08 18:46:13
【问题描述】：

将看似无害的类添加到具有包含 :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;
}

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

【问题讨论】：

这很有趣。我在 Chrome 40 中没有看到问题，意识到可能有更新，更新到 41，现在我看到了。 This will never get old, I tells ya.
在 Chrome 41 上复制。对我来说看起来像一个错误。
chrome 中的错误但是，在 :first-letter 类中设置 vertical-align:top; 也可以。

标签： javascript css google-chrome pseudo-element

【解决方案1】：

伪元素 (:first-letter) 仅在父元素是块容器框时有效（换句话说，它不适用于 display: inline; 元素的第一个字母。）

您必须将伪的父级设置为

.parent {display:block}

【讨论】：

完全正确，或inline-block。谢谢提示

【解决方案2】：

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

幸运的是，与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;
}
*/

【讨论】：

【解决方案3】：

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

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

编辑

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

Codepen

【讨论】：