：first-letter在Chrome中的奇怪行為

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因重新粉刷錯誤而臭名昭著 ）。 如果在標記中聲明“ menuitemon”類，則呈現帶有負邊距的偽元素將毫無問題。 只有動態添加它時，它才會出錯。

幸運的是，與影響Chrome 39-> 40的級聯分辨率錯誤不同，我可以通過在元素上使用負的text-indent而不是在: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

Answer 3

偽元素（：first-letter）僅在父元素是塊容器框時才起作用（換句話說，它在顯示的第一個字母inline; elements上不起作用）。

您必須將pseudo的父項設置為

.parent {display:block}