0

次の Html ページは、IE10 と以前のバージョンの IE では異なる方法でレンダリングされます。

<html>
<body>
<form>
<pre style="position:absolute; top:0; left:0; height:20; width:80;">
<label>My Label</label>
</pre>
<input style="position:absolute; top:0; left:100; height:20; width:80;" type="text" value="My Field"/>
</form>
</body>
</html>

IE10 では、ラベルは以前のバージョンの IE の入力フィールドよりも約 20 ピクセル低く表示され、ラベルとフィールドは水平に配置されていました。

1. IE10 で互換モード ボタンをクリックすると、この問題が修正されます。<pre>2.タグをタグに置き換えて<span>も問題は解決しますが、<pre>タグを維持する必要があります。

<pre>互換モードの手法に戻らずに、以前のバージョンと同じ方法でタグをレンダリングするように IE10 に指示する方法を探しています。

IE10:

ここに画像の説明を入力

IE8:

ここに画像の説明を入力

4

1 に答える 1

0

ドキュメントは quirks モードでレンダリングされます。現在、ブラウザごとに癖が異なります。どうやらIE10には以前のバージョンのIEとは異なる癖があるため、違いがあります。

解決策: 標準モードでレンダリングされるように、DOCTYPE を一番上に置きます。そして、CSS のエラーを修正します (つまり、pxそれぞれの長さに追加します)。

<!DOCTYPE html>
<html>
 <body>
  <form>
   <pre style="position:absolute; top:0; left:0; height:20px; width:80px; margin:0;">
    <label>My Label</label>
   </pre>
   <input style="position:absolute; top:0; left:100px; height:20px; width:80px;"
          type="text" value="My Field"/>
  </form>
 </body>
</html>

その後、ブラウザ間で同じように表示されます。

于 2013-11-05T15:31:21.453 に答える