Нечетное поведение: первая буква в Chrome

Добавление того, что кажется безобидным классом, к элементу, имеющему класс, содержащий: первое письмо заставляет некорректную визуализацию первой буквы при некоторых обстоятельствах. Элемент изначально имеет класс «unindent», а затем добавляется класс «menuitemon». Скрипт http://jsfiddle.net/pgf3reyt/4/ показывает, что это работает над одним элементом и не работает над другим. Работает нормально в Firefox.Нечетное поведение: первая буква в Chrome

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

Может кто-нибудь указать, что я могу делать неправильно, что вызывает это?

источник

2015-03-07 Eric

Это веселый. Я не видел проблему в Chrome 40, понял, что может быть обновление, обновленное до 41, и теперь я это вижу. [Это никогда не стареет, я говорю вам.] (Http://stackoverflow.com/questions/28109129/is-this-a-chrome-css-bug/28109276#28109276) – BoltClock

Воспроизведено на Chrome 41. Похоже, ошибка для меня. – TylerH

ошибка в chrome однако, установка 'vertical-align: top;' in: класс первой буквы также работает. –

Вы не сделали ничего плохого. По-видимому, 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; 
} 
*/

источник

2015-03-07 03:53:42 BoltClock

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

момент я заметил эти две строки она работала правильно

EDIT

NOP это только решить половину проблемы

Codepen

источник

2015-03-07 03:51:43

Нечетное поведение: первая буква в Chrome

ответ

Смежные вопросы