IE8 中的虚线边框渲染错误

发布于 2024-09-14 09:16:41 字数 1458 浏览 4 评论 0原文

我在 IE8 中遇到了另一个问题 - 滚动页面时虚线边框会乱序和中断。

下面是 2 个 w3 有效页面，演示了该行为：作为 HTML4 过渡和 XHTML1 过渡。

在第一个示例中，我通过添加发现了一个完全奇怪的解决问题的方法。元素。只要它在那里，边框就会保持完整（请参阅编辑）。

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：

这里的魔法不会施放。

<!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。

编辑：

<输入> magic for HTML4 示例并不适合所有人，即使使用相同的 IE8 版本也是如此。

点样式也有同样的问题。

如果 border-width > 则边框不会破裂1 像素。

原文

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.

分享到QQ

分享到微博