IE: Polsterung in horizontaler Scroll

Ich bin konfrontiert IE-Problem, für das ich nicht die richtige Lösung finden kann.IE: Polsterung in horizontaler Scroll

Vergleichen von Chrome und IE Ich stelle fest, dass das Hinzufügen von padding-right von der Breite des Inhalts in Chrome und Teil der Breite selbst in IE ausgeschlossen wird.

Gibt es eine geeignete Lösung dafür, oder sollte ich hier einen browserspezifischen Stil wählen?

Wenn die Erklärung nicht gut genug ist, werfen Sie bitte einen Blick in das mitgelieferte Schnipsel unten.

.container { 
 
    width: 480px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    padding-right: 20px; 
 
    overflow: auto; 
 
    background: red; 
 
} 
 

 
.content { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 10px; 
 
    background: white; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-07-28 Clem

Bitte geben Sie (a) an, mit welchen IE-Versionen Sie testen, und (b) ob IE die Seite im Standardmodus, Kompatibilitätsmodus oder Quirksmodus rendert. – Simba

Vergleichen von Chrom und IE ich feststellen, dass padding-rechts wird das Hinzufügen von Inhalt in der Breite Chrom und einen Teil der Breite sich in IE ausgeschlossen.

Dies ist eine klassische Beschreibung des primären Unterschieds beim Rendern, wenn die Seite im Quirks-Modus angezeigt wird.

Sie können den Rendering-Modus reparieren, indem Sie sicherstellen, dass Ihre Seite gültiger HTML-Code ist (dh alle korrekten <html><head>...</head><body>...</body></html> Tags enthält) und mit einer gültigen DOCTYPE-Deklaration beginnt (es gibt eine Reihe von Doctypes, die am einfachsten zu verwenden sind) man ist nur <!DOCTYPE html>).

Machen Sie diese Korrekturen, und Sie werden feststellen, dass der IE Ihre Auffüllung genau so wie Chrome darstellt.

Quelle

2016-07-28 15:04:32 Simba

IE: Polsterung in horizontaler Scroll

Antwort

Verwandte Themen