web-dev-qa-db-fra.com

Comment puis-je contourner ce bogue de mise en page IE11 lié aux cellules de tableau, à la décoration de texte et au remplissage?

Il semble que j’ai trébuché sur un ennuyeux Internet Explorer 11. (Ugh, je pensais que ces jours étaient derrière nous.)

Dans l'exemple suivant, le remplissage de la cellule de tableau de droite disparaît lorsque vous le survolez dans IE11: http://jsfiddle.net/xx4Z4/

Cela semble être dû à un scénario CSS extrêmement spécifique:

  • L'élément utilise display: table-cell
  • L'élément utilise un remplissage basé sur un pourcentage, par exemple, padding: 0 5%
  • Un sous-élément ajoute text-decoration: underline lorsque l'élément parent est survolé

Si vous modifiez l'une de ces trois choses, le problème disparaît.

Cela semble être un bogue d'IE11, mais je me demande: est-ce que quelqu'un peut penser à une solution de contournement pour résoudre ce problème sans abandonner display: table-cell et le remplissage en pourcentage?

htmlcssinternet-explorer
22
Michael

Encore un problème IE11 qui semble si inhabituel. Je vois que le pourcentage de remplissage n'est même pas calculé et n'est pas appliqué dans le layout . Toutefois, le texte est toujours complété en fonction du pourcentage de remplissage. Je suppose donc que le texte est positionné avec le remplissage, mais après le positionnement, le pourcentage de remplissage est "désactivé".

Je ne peux pas vous dire pourquoi cela se produit. Mais si vous voulez vraiment résoudre ces problèmes, vous pouvez utiliser ces solutions rapides.

Utiliser la marge

Étant donné que le pourcentage de bogues ne se produit que sur le remplissage d'une cellule de table, vous pouvez utiliser une marge sur la plage elle-même.

span 
{
    margin-left: 10%;
}

et bien sûr réinitialiser le rembourrage des côtés:

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

Cette "solution" n'est pas aussi dynamique qu'avec un pourcentage de remplissage sur la cellule de table elle-même.

Pourquoi pas?
C'est parce que le pourcentage prend est la valeur de son élément parent, la cellule-tableau. Où, comme la cellule de la table a pris sa valeur en pourcentage basée sur la tabel. Maintenant, quand vous utiliseriez simplement left-margin: 5%;. Ce serait la moitié de l'espace comme il se doit. C'est parce qu'il faut 10% sur la largeur de la cellule de table. Où la largeur de la table-cellule est la largeur de la table divisée par ses cellules (table width / table cell). 

Donc, pour remédier à cela, j'ai utilisé 5 fois plus de cellules (5 * 2 dans ce cas), ce qui donnerait le bon pourcentage.

Cependant, ce n'est pas dynamique lorsque vous souhaitez ajouter plus de cellules.

jsFiddle

Utiliser une bordure

Utiliser une bordure dont la position est "réservée" avant la réinitialisation du remplissage.

Bordure réservée

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

Changer la propriété qui n'a pas besoin de recalculer la position; Couleur 

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

Notez maintenant qu'il n'y aura toujours pas de remplissage dans la mise en page. Dès qu'une propriété affectée qui n'a pas été calculée avant le remplissage a été réinitialisée (au même moment où la position du texte est déterminée), les positions sont recalculées.

jsFiddle

J'espère que l'une de ces solutions rapides fonctionnera pour vous.

Je vois que vous avez envoyé un rapport de bogue à MS . Tenez-nous au courant dès que vous aurez une réponse, je vous en serais reconnaissant :)

15
nkmol

Étrange, personne n'a mentionné pour définir la disposition de la table: corrigé; C'est vraiment important, sinon le remplissage/largeur ne sera pas calculé correctement sur IE (et d'autres effets secondaires étranges, en fonction du cas d'utilisation), en particulier lorsque vous utilisez des images à l'intérieur.

<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

L'ajout de bordures invisibles en haut et en bas semble résoudre le problème.

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

Cela empêche les ancres de bouger en vol stationnaire ou de se concentrer.

J'utilise rgba(0,0,0,0) au lieu de transparent pour une meilleure compatibilité avec l'ancien IE qui affiche transparent en couleur alors que rgba est invalide et ne s'affiche pas du tout.

1
tomasz86

Cela peut être "utilement" résolu en définissant les règles de remplissage css comme ceci ->

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

N'oubliez pas de définir ceci uniquement pour IE car il peut faire en sorte que tout navigateur normal se comporte comme une discothèque.

EDIT: Flexbox fonctionne pour IE 10 et versions ultérieures; cette "solution" n’est donc nécessaire que pour 9 et les versions antérieures.

0
Andreas

Nous avons eu un scénario similaire où aucune des solutions ci-dessus n'a fonctionné.

Au lieu de cela, nous animons la largeur de notre div affecté après le chargement de la page:

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

Cela force IE11 à recalculer la valeur de remplissage relative de la div et à résoudre notre problème.

0
Richard Tinkler

Ce sont toutes de très bonnes réponses, et l'option de requête de média fonctionne bien pour identifier uniquement IE qui a ce problème avec display:table-cell

Ce que j’ai trouvé et qui a bien fonctionné, c’est l’utilisation de vertical-align, qui est un excellent moyen de diriger le texte contenu dans l’élément display:table-cell vers l’emplacement où je le souhaite. Généralement, l'alignement vertical ne fait pas grand chose au formatage, SAUF qu'il soit dans un tableau.

Voici mon HTML simplifié:

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

Et voici le 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;}
}

Vous devrez peut-être également ajuster le li a:hover {line-height} en fonction du contenu de votre CSS pour ces éléments.

De plus, si vous souhaitez que cela fonctionne pour IE 9 et les versions antérieures, nous vous suggérons d'utiliser des commentaires conditionnels qui ajoutent une classe "ie" à la balise <html>, puis créent une feuille de style IE9. Heureusement, le style requis pour IE9 est relativement le même. Mais je n'ai testé qu'avec IE9 et je ne suis pas sûr de vos résultats pour IE8 et IE7.

0
Web-X-Plorer