1

我在 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,边框不会中断。

4

1 回答 1

1

我认为您不应该使用黑客来弥补不良的浏览器行为。最好接受您的内容和样式因浏览器而异,并且尝试在每个浏览器中看起来完全相同是不值得的。

实线是否有效?你可以为 IE 制作一个 CSS 文件,它使用稍微不同的样式。

于 2011-10-23T21:06:01.853 回答