IE8 ignore l'espace de largeur nulle lorsqu'il est précédé d'une barre oblique en mode standard

J'ai une table avec des cellules de largeur variable, et je souhaite donner au navigateur la possibilité d'insérer un saut de ligne avant une barre oblique, sans le forcer. J'ai essayé ceci en insérant un caractère espace ZWSP avant la barre oblique, et cela fonctionne très bien dans tous les navigateurs dans lesquels je l'ai testé, sauf IE6 et IE8.IE8 ignore l'espace de largeur nulle lorsqu'il est précédé d'une barre oblique en mode standard

Pour IE6, j'utilise du Javascript pour remplacer le caractère par un <wbr> tag - pas la solution la plus élégante, mais cela fonctionne.

Dans IE8, je n'ai pas trouvé un moyen pratique de contourner ce problème. Cela chamboule la disposition de ma table. J'ai découvert que cela ne se limite pas aux tables. Cela semble se produire avec n'importe quel type d'élément. Le navigateur refuse de reconnaître le ZWSP, choisissant plutôt de laisser le texte sortir de la boîte, ce qui est laid. J'ai remarqué que je peux faire en sorte que le navigateur le gère correctement en le mettant en compatibilité, mais cela me cause d'autres problèmes.

Est-ce que quelqu'un connaît un moyen simple et pratique de faire en sorte que le ZWSP se comporte comme il le devrait dans IE8?

Vous pouvez utiliser ce code pour tester la question:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<title>zwsp test</title> 
</head> 
<body> 
<div style="width: 50px; border: solid black 1px; font-size: 15px"> 
    Miles&#8203;/gallon 
</div> 
</body></html>

Source

2009-09-25 Elias Zamaria

Je suggère faire le reste de votre travail de site avec vue sur la compatibilité, comme certaines personnes utilisent encore IE7 et obtiendrait la mise en page cassée. OMI, mieux pour cela de travailler dans IE7 que de ne pas travailler dans IE7 et travailler dans IE8. – strager

Cela fonctionne très bien dans IE7. J'essaie de le faire fonctionner dans IE8, de préférence sans forcer le mode de compatibilité. –

Avez-vous vu cette discussion? http://groups.google.com/group/comp.infosystems.www.authoring.html/browse_thread/thread/4f276215889c0b94/ – kangax

Je soupçonne que ce pourrait être un bogue dans IE8. La seule façon que je peux induire le comportement que vous voulez est de changer la barre oblique pour une barre de division (\ u2215 de):

Miles&#8203;&#x2215;gallon

Pour une raison IE8 n'aime pas la proximité de la barre oblique.

Source

2009-09-26 00:08:14 ferdley

Il semble que vous puissiez toujours compter sur Microsoft pour compliquer les choses. Pour chaque bug qu'ils ont corrigé dans IE8, il semble qu'ils ont introduit un nouveau bug. Quoi qu'il en soit, j'ai essayé votre solution et cela a fonctionné. Je vous remercie. –

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<title>zwsp test</title> 
<style type="text/css" media="screen"> 
    .zwsp { 
     display: -moz-inline-box; /* Firefox before 3.0 */ 
     height: 1px; /* Firefox before 3.0 screws up line height */ 
     display: inline-block; /* Standards-based browsers (and IE!) */ 
     overflow: hidden; /* In most cases will prevent weird spacing due to font sizes */ 
     width: 1px; /* Must take up some space to appear in layout */ 
     margin-left: -1px; /* Cancel the space it takes up */ 
    } 
</style> 
</head> 
<body> 
<!-- Wide (without space) --> 
<div style="width: 100px; border: solid black 1px; font-size: 15px"> 
    Miles/gallon 
</div> 
<!-- Wide (with space) --> 
<div style="width: 100px; border: solid black 1px; font-size: 15px"> 
    Miles<span class="zwsp"> </span>/gallon 
</div> 
<!-- Narrow (with space) --> 
<div style="width: 50px; border: solid black 1px; font-size: 15px"> 
    Miles<span class="zwsp"> </span>/gallon 
</div> 
</body></html>

Éditer: l'inconvénient de cette approche est, bien sûr, que le texte lui-même est modifié. Cela peut affecter des choses comme ce qui apparaît dans les résultats des moteurs de recherche. Bien sûr, vous pouvez le servir sans les éléments .zwsp aux araignées. À vous de voir à quel point cela compte, et s'il existe d'autres cas où la présence d'un caractère d'espace réel peut affecter la sortie dans d'autres scénarios.

Source

2009-09-26 00:39:57 eyelidlessness

Votre solution semble intelligente, mais trop complexe et hacky pour moi. Je peux essayer par curiosité un jour, mais je ne suis probablement pas disposé à l'utiliser sur mon site. Je ne pense pas qu'il soit utile d'introduire autant de complexité pour contourner un bogue de rendu IE8 assez mineur. –

Adaptez-vous, mais je ne vois pas vraiment ce qui est si complexe à propos d'un span avec un nom de classe. – eyelidlessness

L'une des complications de ces choses, particulièrement en ce qui concerne les barres obliques et autres, est que le copier/coller récupère l'espace caché de sorte qu'une URL se casse si vous le copiez. Non applicable à tous les scénarios, mais l'avantage de la balise word-break est qu'elle est compatible avec le presse-papiers. – TheXenocide

Je vois le même problème est IE11. La solution de @ferdley fonctionne, mais la barre oblique et & # x2215 sont légèrement différentes.

Ma solution est d'ajouter une autre espace largeur zéro entre la précédente et la barre oblique, par exemple,

Miles&#8203;&#8203;/gallon

Source

2015-12-04 23:27:52 shaosh

IE8 ignore l'espace de largeur nulle lorsqu'il est précédé d'une barre oblique en mode standard

Répondre

Questions connexes