Dashed border rendering bug in IE8

Question

I've come across yet another problem in IE8 - dashed borders scramble and break when scrolling the page.

Below are 2 w3-valid pages demonstrating the behavior: as HTML4 transitional and XHTML1 transitional.

In the 1st example I've discovered an utterly weird fix for the problem by adding an <input> element. Whenever it's there, the borders remain in one piece (see Edit).

HTML4 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>VALID HTML4 TR</TITLE>
<STYLE type="text/css">
#box {
 float: left;
 width: 200px;
 height: 2000px;
 border-right: dashed 1px black;
}
</STYLE>

</HEAD>
<BODY>

<DIV id="box"></DIV>

<INPUT><!-- REMOVE TO BREAK THE DASHED LINE ON SCROLL -->

</BODY>
</HTML>

XHTML1 Transitional:

Here the <input /> magic does not cast.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>VALID XHTML1 TR</title>
<style type="text/css">
#box {
 float: left;
 width: 200px;
 height: 2000px;
 border-right: dashed 1px black;
}
</style>

</head>
<body>

<div id="box"></div>

</body>
</html>

Thus,

What I need is the 2nd example to work the same as the 1st without changing the DTD. Any ideas are welcome.

Thanks

Edit:

The <input> magic for HTML4 example does not work for everyone, even when using the same IE8 build.

Same problem for dotted style.

Borders don't break if border-width > 1px.

:) Don't use a dashed border. If "box" is static, then you could perhaps use Photoshop and apply it as a background? — Hristo
I kinda hoped to use a dashed border on my tables. Switching to repeated backgrounds would bring a lot of pain — krukid
Note for future reference: as long as you have a DTD, and that one isn't a pre-HTML4 one, it'll render in the same standards mode, HTML, XHTML, regardless. The only difference is parsing methods, but even then, the DTD itself doesn't set that, the mimetype does. So... no real need to post a HTML4 copy and an XHTML copy. — Delan Azabani

Reinier Kaper Reinier Kaper · Accepted Answer · 2011-10-23T21:06:01

I don't think you should use hacks to compensate for bad browser behavior. It's better to accept that your content and styling is different across browsers and it's not worth trying to look everything the exact same in every browser.

Does a solid line work though? You could make a CSS file for IE only that uses slightly different styling.

Dashed border rendering bug in IE8

1 Answers