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上的兼容模式按钮可以解决这个问题。2. 用标签替换<pre>标签<span>也可以解决问题，但我需要维护<pre>标签。

我正在寻找一种方法来告诉 IE10 以<pre>与以前版本相同的方式呈现标签，而无需恢复到兼容模式技术。

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 回答