我在 IE8 中遇到了另一个问题 - 滚动页面时,虚线边框会打乱和中断。
下面是演示该行为的 2 个 w3 有效页面:作为 HTML4 过渡和 XHTML1 过渡。
在第一个示例中,我通过添加 <input> 元素发现了一个非常奇怪的解决方案。只要它在那里,边框就会保持在一块(请参阅编辑)。
HTML4 过渡:
<!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 过渡:
这里 <input /> 魔法没有施放。
<!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>
因此,
我需要的是第二个示例,它与第一个示例一样工作,而无需更改 DTD。欢迎任何想法。
谢谢
编辑:
HTML4 示例的 <input> 魔法并不适用于所有人,即使使用相同的 IE8 构建也是如此。
虚线样式也有同样的问题。
如果border-width > 1px,边框不会中断。