Search code examples
htmlinternet-explorer-7

Zero-width non-joiner (‌) shown as pipe in IE7

I'm desperatelty trying to add some whitespaces to list-elements (simplified version below)

<ul>
  <li>&zwnj;&#160;&#160;A1</li>
  <li>&zwnj;&#160;&#160;&#160;&#160;A1.1</li>
  ...
</ul>

My problem is, that IE7 is ignoring the whitespaces, so I added the zero-width non-joiner (&zwnj;). And here comes the next- problem. IE7 is rendering the &zwnj; as a pipe (vertikal bar).

Any hints how I can solve ths problem? My aim is to intend the list-elements with whitespaces (or whatever).

Solution

  • Technically, the reason why IE 7 shows a “pipe” is that this is its indication of an unrepresentable character. IE 7 does not know that ZWNJ is a control character and tries to find it in the font, and this fails for most fonts. You can circumvent this by setting the font to one that contains ZWNJ, e.g.

    li { font-family: "Arial Unicode MS", "Lucida Sans Unicode" }

    This of course affects the font in general, but you could wrap the ZWNJ characters inside span elements and set the style on them only.

    This looks like a completely wrong approach, however. ZWNJ prevents ligature behavior and should not be needed at all here. IE treats no-break spaces as non-collapsible anyway (as you can see by testing your code in isolation). If it does not, there is something else going on, something that cannot be seen from the code you posted.