Question

我有一个包含两个元素的简单页面：

<html>
  <body>
    <input type="text" style="height: 18px; width: 120px" /><br/>
    <select style="height: 18px; width: 120px">
      <option>test</option>
    </select>
  </body>
</html>

为了使其兼容w3c并在浏览器中一致显示，我添加了一个DOCTYPE元素和一个XML命名空间：

<!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">
  <body>
    <input type="text" style="height: 18px; width: 120px" /><br/>
    <select style="height: 18px; width: 120px">
      <option>test</option>
    </select>
  </body>
</html>

CSS只是尝试使文本框和选择框的宽度和高度相同。

但是，出于某种原因，第二页不再尊重我在输入标签上设置的高度和宽度CSS属性。每个浏览器（IE，Firefox，Chrome）的文本框大约高4个像素，每个浏览器宽4-6个像素。

我使用了各种开发人员工具来尝试找出正在应用的其他标记，但我找不到任何标记。

如果可能，有人可以向我解释这种行为吗？

非常感谢任何帮助。

谢谢，

B.J。

Answer 1

您的代码不符合XHTML，您错过了一个主要元素：

<!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 goes here -->
  <head>
   <title>My page title</title>
  </head>

  <body>
    <input type="text" style="height: 18px; width: 120px" /><br/>
    <select style="height: 18px; width: 120px">
      <option>test</option>
    </select>
  </body>
</html>

如果你想使输入相同，你应该按如下方式设置它们：

<style type="text/css">
input[type="text"], select{
    width: 120px;
    height: 18px;
    padding: 0;
    margin: 0;
    border:1px solid grey;
}
</style>

~~这是编写正确的XHTML http://www.w3schools.com/xhtml/xhtml_intro.asp~~

的一个很好的参考

关于良好资源的文章以及上述网站为什么不是一个好参考的好解释：W3Fools。

Answer 2

不指定doctype可以将许多浏览器置于兼容模式。在没有实际调查的情况下，我猜想没有doctype的页面渲染不正确。尝试在第一个样本上放置doctype（html4或其他内容），看看会发生什么。

编辑：渲染差异的最大原因来自兼容模式。在尝试寻找差异之前，请确保您的标记有效（http://validator.w3.org/）和您的stlyesheets（http://jigsaw.w3.org/css-validator/）。如果标记没有告诉浏览器如何解析它，或者其中有错误，浏览器可能会在呈现页面时出错。

在您的示例中，它可能在no-doctype标记上运行怪异模式，导致样式表错误。

为什么在应用XHTML Transitional doctype时元素看起来有所不同？

2 个答案: