IE10 ошибка высоты строки с дисплеем: встроенный блок; и переполнение: скрытый;

Итак, я недавно столкнулся с особой проблемой в IE10 (вздох). Похоже, что если вы используете display:inline-block; в сочетании с overflow:hidden; IE10 испортит вашу высоту строки. Я попытался исправить это с помощью vertical-align: middle; но это только почти устраняет проблему в IE10, а затем вводит базовые проблемы в других браузерах.

единственный код, необходимый для запуска ошибки есть:

CSS:

.bug {
  display:inline-block;
  overflow:hidden;
}

HTML-код:

<p>This should <span class="bug">be buggy</span> in IE10</p>

Я создал JSFiddle, чтобы проиллюстрировать ошибку -http://jsfiddle.net/laustdeleuran/5pWMQ/.

здесь также есть скриншот ошибки -http://cl.ly/image/2U1g3i0b0Y2y

кто-нибудь видел / исправил эту проблему раньше?

EDIT:

это не ошибка IE10 (но больше случай ленивое тестирование от моего имени). На самом деле Chrome (webkit) - это тот, кто делает это неправильно -https://stackoverflow.com/a/15883508/799327.

1 ответов


CSS 2.1 говорит

базовая линия "встроенного блока" является базовой линией его последней строки в нормальном течении, если оно не имеет или никакие коробки линии в-подачи или если его свойство "overflow" имеет вычисленное значение, отличное от "visible", в в этом случае базовой линией является нижний край поля.

что именно и делает IE10.

и Firefox и Opera делают то же самое.

Это не IE, это прослушивается, это Chrome, который не следует вышеуказанному правилу правильно.