Błąd linii IE10 z wyświetlaczem: blok inline; i przepełnienie: ukryte;

Niedawno natknąłem się na specyficzny problem w IE10 (westchnienie). Wydaje się, że jeśli używasz display: inline-block; w połączeniu z przelewem: ukryty; IE10 miesza się z twoją linią wysokości. Próbowałem naprawić go za pomocą vertical-align: middle; ale to tylko prawie rozwiązuje problem w IE10, a następnie wprowadza podstawowe problemy w innych przeglądarkach.Błąd linii IE10 z wyświetlaczem: blok inline; i przepełnienie: ukryte;

Jedynym kod potrzebny do wywołania błędu jest:

CSS:

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

HTML:

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

stworzyłem JSFiddle aby zilustrować problem - http://jsfiddle.net/laustdeleuran/5pWMQ/ .

Jest też zrzut ekranu z błędem tutaj - http://cl.ly/image/2U1g3i0b0Y2y

Czy ktoś widział/wcześniej ustalony ten problem?

EDIT:

To nie jest błąd IE10 (ale raczej przypadek testowania leniwa w moim imieniu). W rzeczywistości Chrome (webkit) robi to źle - https://stackoverflow.com/a/15883508/799327.

Źródło

2013-04-08 Laust Deleuran

Dane wyjściowe pasują do zrzutu ekranu w każdej przeglądarce innej niż WebKit, w tym starszych wersji IE. Tylko bieżący Chrome zachowuje to samo wyrównanie w pionie. Zadzwoń do mnie stronniczy, ale myślę, że to błąd w WebKit, a nie w IE. – BoltClock

Tak, masz absolutną rację. Po prostu nie sądziłem, że to możliwe. Głupi ja. –

Czy naprawiłeś ten problem jeszcze? – Twocode

CSS 2.1 mówi

Linia bazowa o „inline-block” jest linia bazowa jego ostatniego pola liniowego w układzie normalnym, o ile nie ma albo nie ma pola linii w przepływowym lub jeśli jego " właściwość overflow 'ma wartość obliczoną inną niż "visible", w przypadku, gdy linia bazowa jest dolną krawędzią marginesu.

co jest dokładnie tym, co robi IE10.

Firefox i Opera robią to samo.

To nie jest IE, ale Chrome, który nie jest zgodny z powyższą zasadą poprawnie.

Źródło

2013-04-08 15:46:36 Alohci

Argh, więc to tylko mnie przyłapano, udając, że mamy monokulturę webkitów. Czego naprawdę nie chcę. W każdym razie, dziękuję za szybką odpowiedź, będę musiał zagłębić się w inny sposób, żeby to naprawić :) –

Sformułowanie standardów ustawia mnie na właściwej ścieżce, aby uzyskać to, czego chcę. Po prostu potrzebuję użyć vertical-align: bottom ;. Zaktualizowałem JSFiddle, aby to odzwierciedlić: http://jsfiddle.net/laustdeleuran/5pWMQ/ –

Błąd linii IE10 z wyświetlaczem: blok inline; i przepełnienie: ukryte;

Odpowiedz

Powiązane problemy