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.
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.
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.