it-swarm.com.de

Wie kann ich diesen IE11-Layoutfehler in Bezug auf Tabellenzellen, Textdekorationen und Füllungen umgehen?

Anscheinend bin ich auf einen nervigen Internet Explorer 11 - Layoutfehler gestoßen. (Ugh, ich dachte, diese Tage wären hinter uns.)

Im folgenden Beispiel verschwindet die Auffüllung in der rechten Tabellenzelle, wenn Sie in IE11 darauf zeigen: http://jsfiddle.net/xx4Z4/

Dies scheint auf ein unglaublich spezifisches CSS-Szenario zurückzuführen zu sein:

  • Das Element verwendet display: table-cell
  • Das Element verwendet eine prozentuale Auffüllung, z. B. padding: 0 5%.
  • Ein Unterelement fügt text-decoration: underline hinzu, wenn das übergeordnete Element über den Zeiger gezogen wird

Wenn Sie eines dieser drei Dinge ändern, wird das Problem behoben.

Dies scheint ein IE11-Fehler zu sein, aber ich frage mich: Kann sich jemand eine Problemumgehung für dieses Problem vorstellen, ohne display: table-cell und prozentuale Auffüllung aufgeben zu müssen?

22
Michael

Wieder ein IE11-Problem, das so ungewöhnlich erscheint. Ich sehe, dass der prozentuale Abstand nicht einmal berechnet wird und nicht im layout angewendet wird. Der Text wird jedoch weiterhin entsprechend dem Füllungsprozentsatz aufgefüllt. Ich würde also annehmen, dass der Text mit der Auffüllung positioniert ist, aber nach der Positionierung ist die prozentuale Auffüllung "deaktiviert".

Ich kann dir nicht sagen warum dies passiert. Wenn Sie diese jedoch wirklich beheben möchten, können Sie diese schnellen Korrekturen verwenden.


Rand verwenden

Da der prozentuale Fehler nur beim Auffüllen einer Tabellenzelle auftritt, können Sie tatsächlich einen Rand für den Bereich selbst verwenden.

span 
{
    margin-left: 10%;
}

und natürlich die Polsterung der Seiten zurücksetzen:

div.table-cell {
    display: table-cell;
    padding: 20px 0;
}

Diese "Lösung" ist nicht so dynamisch wie bei der prozentualen Auffüllung der Tabellenzelle.

Warum nicht?
Der Prozentsatz nimmt den Wert des übergeordneten Elements, der Tabellenzelle, an. Wo die Tabellenzelle ihren prozentualen Wert basierend auf der Tabelle verwendet hat. Wenn Sie jetzt nur left-margin: 5%; verwenden würden. Es wäre die Hälfte des Platzes, wie es sein sollte. Dies liegt daran, dass die Tabellenzellenbreite 10% beträgt. Wobei die Tabellenzellenbreite die Tabellendicke ist, die durch ihre Zellen (table width / table cell) geteilt wird. 

Um das zu beheben, habe ich 5 mal die Anzahl der Zellen (in diesem Fall 5 * 2) gemacht, was den richtigen Prozentsatz ergeben würde.

Dies ist jedoch nicht dynamisch, wenn Sie weitere Zellen hinzufügen möchten.

jsFiddle


Grenze verwenden

Verwenden Sie den Rand, dessen Position "reserviert" ist, bevor die Auffüllung zurückgesetzt wird.

Reservierte Grenze

span 
{
     border-bottom: 1px solid transparent;   
}

Eigenschaft ändern, die keine Neuberechnung der Position erfordert; Farbe 

div.table-cell-bug:hover span 
{
    border-bottom-color: black; 
}

Beachten Sie nun, dass im Layout immer noch keine Auffüllung vorhanden ist. Sobald eine Eigenschaft zugewiesen wird, die noch nicht berechnet wurde, bevor die Auffüllung zurückgesetzt wurde (zur selben Zeit wie die Textposition bestimmt wird), werden die Positionen neu berechnet.

jsFiddle


Ich hoffe, dass eine dieser schnellen Korrekturen für Sie funktioniert.

Ich sehe, Sie haben einen Fehlerbericht an MS gesendet. Halten Sie uns auf dem Laufenden, wenn Sie eine Antwort erhalten, ich würde mich freuen :)

15
nkmol

Seltsam, niemand erwähnte das Tabellen-Layout: fest; Es ist wirklich wichtig, sonst wird die Auffüllung/Breite unter IE (und einigen anderen ungewöhnlichen Nebeneffekten, abhängig vom Anwendungsfall) nicht korrekt berechnet, insbesondere wenn Sie Bilder darin verwenden.

<style>
  .table { display:table; table-layout:fixed; }
  .table-cell { display:table-cell; }
</style>

<div class="table">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>
3
ioCron

Das Hinzufügen von unsichtbaren oberen und unteren Rändern scheint das Problem zu beheben.

a {
  border: solid rgba(0,0,0,0);
  border-width: thin 0;
}

Dies verhindert, dass sich die Anker im Schwebeflug oder im Fokus bewegen.

Ich benutze rgba(0,0,0,0) anstelle von transparent zur besseren Kompatibilität mit alten IE, die transparent in Farbe anzeigen, während rgba ungültig gemacht und überhaupt nicht angezeigt wird.

1
tomasz86

Dies kann "hilfreich" gelöst werden, indem Sie die paddding-css-Regeln wie folgt festlegen ->

element:hover,
        element:active,
        element:focus  {
            // padding example
            padding-left: 1.5%;
        }

Denken Sie daran, dies nur für IE festzulegen, da sich dadurch alle normalen Browser wie eine Disco verhalten können.

BEARBEITEN: Flexbox funktioniert für IE 10 und höher, daher wird diese "Lösung" nur für 9 und darunter benötigt.

0
Andreas

Wir hatten ein ähnliches Szenario , bei dem keine der oben genannten Lösungen funktionierte.

Stattdessen animieren wir die Breite des betroffenen div, nachdem die Seite geladen wurde:

if (!!navigator.userAgent.match(/Trident\/7\./)){
            $("#karina-rosner2").animate({'width': '20.1%'},1);     
            $("#karina-rosner2").animate({'width': '20%'},1);   
}

Dies zwingt IE11 zur Neuberechnung des relativen Auffüllwerts von div und zur Lösung unseres Problems.

0
Richard Tinkler

Dies sind alles wirklich gute Antworten, und die Medienabfrageoption funktioniert gut, um nur IE zu identifizieren, bei dem dieses Problem mit display:table-cell auftritt.

Was ich getan habe, das ich gut funktionierte, war die Verwendung von vertical-align als eine großartige Möglichkeit, den im display:table-cell-Element enthaltenen Text dahin zu lenken, wo ich ihn haben wollte. Normalerweise macht vertikales Ausrichten nicht viel zum Formatieren, es sei denn, es befindet sich in einer Tabelle.

Hier ist mein vereinfachtes HTML:

<li id="table-cell-element">
   <a href="#">
      <img src="event.png"/>
      <small>Register for Event</small>
   </a>
</li>

Und hier ist das CSS:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;} 
    li a {display:inline-block;} 
    li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
    small {display:block; font-size:60%; font-weight:bold; color:#333;}
}

Möglicherweise müssen Sie auch den li a:hover {line-height} anpassen, je nachdem, was für diese Elemente in Ihrem CSS enthalten ist

Wenn dies für IE 9 und darunter funktionieren soll, empfehle ich, bedingte Kommentare zu verwenden, die dem Tag <html> eine "ie" -Klasse hinzufügen und dann ein IE9-Stylesheet erstellen. Zum Glück ist das für IE9 erforderliche Styling relativ gleich. Aber ich habe nur über IE9 getestet und bin mir Ihrer Ergebnisse für IE8 und IE7 nicht sicher.

0
Web-X-Plorer