IE10-Zeilenhöhenfehler mit Anzeige: Inline-Block; und Überlauf: versteckt;

Also, ich habe kürzlich in einem speziellen Problem in IE10 (Seufz) eingelaufen. Es scheint, dass wenn Sie display verwenden: Inline-Block; in Verbindung mit Überlauf: versteckt; IE10 vermasselt die Zeilenhöhe. Ich habe versucht, es mit Hilfe von vertikal ausrichten: Mitte; Aber das behebt nur fast das Problem in IE10 und führt dann Baseline-Probleme in anderen Browsern ein.IE10-Zeilenhöhenfehler mit Anzeige: Inline-Block; und Überlauf: versteckt;

Der einzige Code benötigt, um den Fehler auszulösen ist:

CSS:

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

HTML:

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

ich einen JSFiddle erstellt, den Fehler zu veranschaulichen - http://jsfiddle.net/laustdeleuran/5pWMQ/ .

Es gibt auch einen Screenshot des Fehlers hier - http://cl.ly/image/2U1g3i0b0Y2y

Hat jemand dieses Problem schon einmal gesehen/fixed?

EDIT:

Dies ist kein IE10-Bug (aber mehr ein Fall von faulen Tests in meinem Namen). Eigentlich ist Chrome (Webkit) derjenige, der es falsch macht - https://stackoverflow.com/a/15883508/799327.

Quelle

2013-04-08 Laust Deleuran

Die Ausgabe entspricht dem Screenshot in jedem Nicht-WebKit-Browser für mich, einschließlich älterer Versionen von IE. Nur das aktuelle Chrome behält die vertikale Ausrichtung bei. Nenne mich voreingenommen, aber ich denke, das ist ein Bug mit WebKit, nicht IE. – BoltClock

Ja, du hast absolut recht. Ich habe einfach nicht gedacht, dass das eine Möglichkeit ist. Ich Idiot. –

hast du dieses Problem schon behoben? – Twocode

CSS 2.1 sagt

Die Basislinie eines ‚inline-block‘ ist die Grundlinie der letzten Zeile Feld im normalen Fluss, es sei denn, es entweder nicht in Laufleitung Boxen hat oder wenn seine " Überlauf 'Eigenschaft hat einen berechneten Wert anders als' sichtbar ', in in diesem Fall ist die Basislinie die untere Randkante.

was genau IE10 macht.

Und Firefox und Opera machen das gleiche.

Es ist nicht IE, der abgehört wird, es ist Chrome, die die obige Regel nicht korrekt befolgt.

Quelle

2013-04-08 15:46:36 Alohci

Argh, also bin ich nur dabei ertappt zu werden, dass wir eine Webkit-Monokultur haben. Was ich wirklich nicht will. Wie auch immer, danke für die schnelle Antwort, muss in eine andere Weise suchen, um dies zu beheben :) –

Also, die Standards Formulierung setzte mich auf den richtigen Weg, um zu bekommen, was ich will. Ich brauche nur vertikal ausrichten: unten; Ich habe den JSFiddle aktualisiert, um dies zu reflektieren: http://jsfiddle.net/laustdeleuran/5pWMQ/ –

IE10-Zeilenhöhenfehler mit Anzeige: Inline-Block; und Überlauf: versteckt;

Antwort

Verwandte Themen