IE 11 étrangeté frontière-rayon (ne s'est pas produite dans IE 9 et IE dix)
J'ai cherché des questions similaires relatives à border-radius dans IE 11, mais une seule trouvée sur le site de développeur Microsoft IE a décrit ce que je rencontre également depuis la "mise à niveau" vers IE 11. La réponse à la publication de ce fil de discussion consistait à s'assurer que le DOCTYPE était HTML5 et non quirks.
Je suis en train de terminer la refonte d'un site Web. Oui, il s'agit de HTML5 et du DOCTYPE correct, mais je continue à avoir un problème étrange avec border-radius. Il y a un décalage de 1 px pour presque tous les éléments pour lesquels j'ai appliqué un rayon de bordure. Si je désélectionne border-radius, le problème disparaît et tout va bien, mais il est choquant que ce ne soit pas un problème dans IE 9 ou IE 10. Seulement depuis IE 11 il y a quelques jours , ce problème est-il apparu? J'ai testé à la fois Windows 7 avec IE 11 et Windows 8.1 avec IE 11, et le problème existe sur les deux.
Exemple 1:
J'ai un border-radius: 5px 0 0 5px ici, puis j'applique des pseudo-éléments distincts: before et: after pour obtenir le triangle pointu, mais le rayon de la bordure semble créer une ligne blanche de 1px, de sorte qu'il n'est plus aligné avec le reste de l'élément. Cela fonctionnait bien même dans IE 8, mais est maintenant interrompu dans IE 11. Si je supprime le rayon de la bordure, le triangle de pseudo-élément redevient à plat avec l'élément.
Exemple 2:
Un bouton de lien <a>, affiché en tant que bloc en ligne, comporte un dégradé linéaire pour un arrière-plan, une bordure unie bleue de 1px et border-radius: 4px. Mais la bordure-rayon crée une autre ligne blanche de 1px à l'intérieur de la bordure bleue de 1px. Quelle que soit la valeur du rayon de la bordure, la ligne blanche reste sauf si le rayon de la bordure est 0.
Exemple 3:
Trois éléments de lien <a> sont définis sur display: inline-block dans un <div> placé par rapport à un autre <div> situé en dessous. Le <div> inférieur a un border-radius: 4px et les éléments <a> à l'intérieur du <div> supérieur ont un rayon de bordure en haut à gauche et à droite (illustré). IE 11 affiche un écart de 1 pixel entre les deux éléments <div> (comme indiqué dans le fil des autres affiches lié ci-dessus). Mais si le bord du rayon <div> inférieur est défini sur 0, l'écart disparaît.
Encore une fois, aucune de ces instances n'était un problème dans IE 9 et IE 10; Ce n'est que depuis IE 11 que cet "écart de 1px" avec des éléments ayant un rayon de rayon est apparu. Je ne sais pas comment le réparer. Bien sûr, aucun autre navigateur n'est affecté. Firefox, Safari, Opera et Chrome affichent tous très bien.
Toute aide serait grandement appréciée.
Autant que je sache, il y a un bogue avec border-radius dans IE11. Le problème que vous décrivez peut faire partie de la situation dans son ensemble. Plus d'informations .
La solution de contournement de pixel fractionnée peut amener Firefox à incliner le texte de 1 pixel, en raison de leur solution de contournement alignée sur les pixels pour le flou des types clairs dans les tailles de police sélectives.
Le débordement: solution de contournement de wrapper masqué dans ce fil de discussion msdn (où vous avez posté) est peut-être moins sujet à des problèmes de compatibilité de ce type.