web-dev-qa-db-fra.com

La barre de défilement chevauche le contenu sur IE/Edge

Je souhaite une barre de défilement horizontale et aucun défilement vertical sur un conteneur racine et une barre de défilement verticale sur des sous-conteneurs et aucune barre de défilement horizontale. Compatibilité requise: IE, Edge, Chrome, FF. (Dernières versions)

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

Aucun problème avec le défilement sur Chrome et FF, mais sous IE11 et Edge, le défilement du conteneur racine chevauche le contenu du sous-conteneur.

Remarque: chaque sous-conteneur doit avoir une largeur égale à 50% du sous-conteneur.

Voici mon problème dans un violon.

Qu'est-ce que j'ai manqué pour que ça marche?

MODIFIER :

Windows 10 Edge  Win10 Edge

Windows 10 IE  W

Veuillez noter que sur IE11, les frontières ne sont pas visibles. Le bogue est plus visible sur Edge.

csscss3internet-explorercross-browser
8
Zysce

Je n'aime pas cette solution, mais j'ai ajouté des requêtes de support pour IE et Edge en fonction de la réponse itodd.

IE 11: Comment cibler uniquement IE (toute version) dans une feuille de style? (Edge Hack ne fonctionne pas)

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

Edge: Comment cibler Microsoft Edge avec CSS?

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

Utilisez-vous Windows 8+? Peut-on poster une capture d'écran du problème?

(J'utilise IE11 et Windows 7 et ça a l'air bien)

Il existe un problème (ou une caractéristique de conception, selon votre perception) avec IE10 + sous Windows 8+ où la barre de défilement recouvre le contenu. Essayez ce qui suit et faites-moi savoir s'il résout votre problème.

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

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

3
itodd

Assurez-vous de vérifier la liste des bogues Flex que IE a; surtout que vous utilisez box-sizing: border-box, une propriété connue pour avoir des problèmes de compatibilité dans IE: https://github.com/philipwalton/flexbugs#flexbug-7

1
murb