it-swarm.com.de

Die Bildlaufleiste überlappt den Inhalt im IE/Edge

Ich hätte gerne eine horizontale Bildlaufleiste und keine vertikale Bildlaufleiste in einem Root-Container und eine vertikale Bildlaufleiste in Untercontainern und keine horizontale Bildlaufleiste. Kompatibilität erforderlich: IE, Edge, Chrome, FF. (Letzte Version)

<rootcontainer> => horizontal scroll
 <subcontainer1> => vertical scroll
  <data></data>
 </subcontainer1>
 <subcontainer2> => vertical scroll
   <data></data>
 </subcontainer2>
</rootcontainer>

Kein Problem mit dem Bildlauf in Chrome und FF, aber auf IE11 und Edge überlappt der Bildlauf des Stammcontainers den Inhalt des Untercontainers.

Hinweis: Jeder Untercontainer muss eine Breite haben, die 50% des Untercontainers entspricht.

Hier ist mein Problem in einer Geige.

Was habe ich vermisst, damit es funktioniert?

BEARBEITEN:

Windows 10 Edge  Win10 Edge

Windows 10 IE  W

Bitte beachten Sie, dass die Grenzen an IE11 nicht sichtbar sind. Der Fehler ist auf Edge besser sichtbar

8
Zysce

Diese Lösung gefällt mir nicht, aber ich habe Medienabfragen für IE und Edge basierend auf der Antwort von itodd hinzugefügt.

IE 11: Wie kann nur IE (beliebige Version) innerhalb eines Stylesheets anvisiert werden? (Edge Hack funktioniert nicht)

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
  .document { padding-bottom: 17px; } 
}

Edge: Wie kann ich Microsoft Edge mit CSS ansprechen?

@supports (-ms-ime-align: auto) { 
  .document { padding-bottom: 12px; } 
}
0
Zysce

Verwenden Sie Windows 8+? Kann einen Screenshot der Ausgabe posten?

(Ich verwende IE11 und Windows 7 und es sieht gut aus)

Bei IE10 + unter Windows 8+ gibt es ein Problem (oder eine Design-Funktion, je nachdem, wie Sie es betrachten), bei der die Bildlaufleiste den Inhalt überlagert. Versuchen Sie Folgendes und lassen Sie mich wissen, ob das Problem dadurch behoben wird.

.document,
.meta,
.viewer,
.other-doc {
    -ms-overflow-style: scrollbar;
}

Auschecken https://msdn.Microsoft.com/en-us/library/mt712067(v=vs.85).aspx

3
itodd

Überprüfen Sie unbedingt die Liste der Flex-Fehler, die IE enthält. Zumal Sie box-sizing: border-box verwenden, eine Eigenschaft, die bekanntermaßen Kompatibilitätsprobleme im IE hat: https://github.com/philipwalton/flexbugs#flexbug-7

1
murb