1

IE8 でさらに別の問題に遭遇しました。ページをスクロールすると、破線の境界線がスクランブルして壊れます。

以下は、HTML4 トランジショナルおよび XHTML1 トランジションとしての動作を示す 2 つの w3 有効なページです。

最初の例では、 <input> 要素を追加することで、問題のまったく奇妙な修正を発見しました。そこにあるときはいつでも、境界線は 1 つの部分のままです (「編集」を参照)。

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 を変更せずに 1 番目と同じように機能する 2 番目の例です。どんなアイデアでも大歓迎です。

ありがとう

編集：

HTML4 の例の <input> マジックは、同じ IE8 ビルドを使用している場合でも、すべての人に有効というわけではありません。

点線スタイルでも同じ問題。

border-width > 1px の場合、境界線は壊れません。

4

1 に答える 1

1

ブラウザの悪い振る舞いを補うためにハックを使うべきではないと思います。コンテンツとスタイルはブラウザーによって異なることを受け入れたほうがよいでしょう。また、すべてのブラウザーですべてをまったく同じように表示しようとする価値はありません。

しかし、実線は機能しますか？少し異なるスタイルを使用する IE 専用の CSS ファイルを作成できます。

于 2011-10-23T21:06:01.853 に答える