Dashed border rendering bug in IE8

Hi, 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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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.

ansaurus

tags:

views:

answers:

Dashed border rendering bug in IE8

related questions