Geek Answers Handbook

IE8 ignores zero-width space when it comes before a slash in standard mode

I have a table with cells of variable width, and I want to give the browser the ability to insert a line break before the slash, without forcing it. I tried this by inserting a zero-width character (ZWSP) in front of the slash, and it works fine in all browsers I tested it except for IE6 and IE8.

For IE6, I use some Javascript to replace the character with the <wbr> tag - not the most elegant solution, but it works.

In IE8, I did not find a practical way to get around it. This will ruin the layout of my table. I found out that this is not limited to tables only. This seems to be happening with any element. The browser refuses to recognize the ZWSP, choosing instead a text coming out of the box that looks ugly. I noticed that I can get the browser to handle it properly by putting it in the compatibility view, but this causes other problems for me.

Does anyone know a simple and practical way to make ZWSP behave as it is supposed to in IE8?

You can use this code to verify the problem:

<!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>
+6
html internet-explorer-8
source share
3 answers

I suspect this may be a bug in IE8. The only way I can trigger the behavior you want is to change the slash for the slash (\ u2215):

 Miles&#8203;&#x2215;gallon

For some reason, IE8 doesn't like the close proximity of a slash.

+4
source share
 <!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>

Edit: The drawback of this approach, of course, is that the text itself is modified. This may affect material similar to what appears in search engine results. Of course, you can serve it without .zwsp elements for spiders. To you, how important this is, and whether there are other cases where the presence of an actual gap can affect the output in other scenarios.

+3
source share

I see the same problem as IE11. @Ferdley's solution works, however regular slash and & # x2215 look a bit different.

My solution just adds another zero-width space between the previous and the slash, i.e.

 Miles&#8203;&#8203;/gallon
0
source share

More articles:


All Articles