I have a table with variable-width cells, and I want to give the browser the option to insert a line break before a slash, without forcing it. I tried this by inserting a zero-width space (ZWSP) character before the slash, and it works fine in all the browsers I tested it in, except IE6 and IE8.
For IE6, I use some Javascript to replace the character with a <wbr> tag -- not the most elegant solution, but it works.
In IE8, I haven't found a practical way of working around it. It messes up the layout of my table. I found out that it is not limited just to tables. It seems to happen with any kind of element. The browser refuses to acknowledge the ZWSP, choosing instead to let the text flow out of the box, which looks ugly. I have noticed that I can make the browser handle it properly by putting it into compatibility view, but that causes other problems for me.
Does anyone know of a simple and practical way to make the ZWSP behave the way it is supposed to in IE8?
You can use this code to test the issue:
<!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​/gallon
</div>
</body></html>