为什么应用了XHTML过渡doctype的元素看起来不同？_Html_Css_W3c_Doctype

为什么应用了XHTML过渡doctype的元素看起来不同？

html css

为什么应用了XHTML过渡doctype的元素看起来不同？,html,css,w3c,doctype,Html,Css,W3c,Doctype,我有一个包含两个元素的简单页面： <html> <body> <input type="text" style="height: 18px; width: 120px" /><br/> <select style="height: 18px; width: 120px"> <option>test</option> </select> </body&g

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

<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属性。文本框在每个浏览器（即Firefox、Chrome）中高出约4像素，在每个浏览器中宽4-6像素

我使用了各种开发工具试图找出应用了哪些附加标记，但我找不到任何附加标记

如果可能的话，有人能给我解释一下这种行为吗

任何帮助都将不胜感激

谢谢

B.J.

不指定doctype会使许多浏览器进入兼容模式。如果不进行实际调查，我猜没有doctype的页面呈现不正确。尝试在第一个示例中添加doctype（html4或其他内容），看看会发生什么

编辑：渲染差异的最大原因来自兼容性模式。在尝试查找差异之前，请确保标记是有效的（），stlysheets（）也是有效的（）。如果标记没有告诉浏览器如何解析它，或者标记中有错误，则浏览器可能会在呈现页面时出错

在您的示例中，可能是在无doctype标记上运行quirks模式导致样式表错误。

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

您的代码不符合XHTML，您缺少一个head元素：

<!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>


输入[type=“text”]，选择{
宽度：120px；
高度：18px；
填充：0；
保证金：0；
边框：1px纯灰；
}

这是编写正确的XHTML的一个很好的参考

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

您的代码不符合XHTML，您遗漏了一个head元素：

<!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>


输入[type=“text”]，选择{
宽度：120px；
高度：18px；
填充：0；
保证金：0；
边框：1px纯灰；
}

这是编写正确的XHTML的一个很好的参考

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

这让我更接近了一点，但内容仍然不尽相同。文本框比选择框高约2像素，长约2像素。我刚刚浏览了W3XHTML页面，坦率地说，这个建议很糟糕，在我们经常看到的问题中，所有地方都出现了关键遗漏。我不会向任何人推荐它。选择框总是有样式问题，尝试向选择框添加宽度和高度以匹配输入。我接受这一解决方案，但说它们“总是有样式问题”并不是我想要的答案。我真的很想知道为什么浏览器总是显示选择框比文本框短。浏览器开发人员是否遵循了某种规范来设计这种样式？xhtml1过渡DTD是否做出了某种含糊不清的“this应该比that更长更高”声明？我想我是想说，如果这样的问题再次出现，我想知道这类信息的来源。web上任何样式的规范都应该来自w3c.org“>w3c。事实上，在显示具有初始样式的元素时，每个供应商都是独立的。Safari一般都会这样做，Firefox就像它的远亲Netscape一样，chrome在某种程度上实现了不同的风格，等等。要真正了解这些浏览器差异，最好的办法是通过搜索、文章和体验。这是网络的一种奇怪的方式，也是标准。这让我更接近了，但元素仍然不尽相同。文本框比选择框高约2像素，长约2像素。我刚刚浏览了W3XHTML页面，坦率地说，这个建议很糟糕，在我们经常看到的问题中，所有地方都出现了关键遗漏。我不会向任何人推荐它。选择框总是有样式问题，尝试向选择框添加宽度和高度以匹配输入。我接受这一解决方案，但说它们“总是有样式问题”并不是我想要的答案。我真的很想知道为什么浏览器总是显示选择框比文本框短。浏览器开发人员是否遵循了某种规范来设计这种样式？xhtml1过渡DTD是否做出了某种含糊不清的“this应该比that更长更高”声明？我想我是想说，如果这样的问题再次出现，我想知道这类信息的来源