Ошибка рендеринга пунктирной границы в IE8 - PullRequest
Новая
       17

Ошибка рендеринга пунктирной границы в IE8

1 голос
/ 12 августа 2010

Я столкнулся с еще одной проблемой в 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 Переходный:

Здесь магия не разыгрывается. 

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

Таким образом,

Мне нужен 2-й пример, чтобы работать так же, как 1-й, без изменения DTD. Любые идеи приветствуются.

Спасибо

Edit:

Пример magic for HTML4 не работает для всех, даже при использовании одной и той же сборки IE8.

Та же проблема для пунктирного стиля.

Границы не ломаются, если border-width> 1px.

1 Ответ

1 голос
/ 24 октября 2011

Я не думаю, что вы должны использовать хаки, чтобы компенсировать плохое поведение браузера.Лучше согласиться с тем, что ваш контент и стиль в разных браузерах различаются, и не стоит пытаться выглядеть одинаково в каждом браузере.

Хотя работает ли сплошная линия?Вы можете создать CSS-файл только для IE, который использует немного другой стиль.

...