Question

以下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：

enter image description here

IE8：

enter image description here

Answer 1

文档以怪癖模式呈现。现在不同的浏览器有不同的怪癖;显然，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>

然后它将在浏览器中显示相同内容。

与以前的IE版本相比，IE10中的预标记呈现方式不同

1 个答案: