为什么元素与应用的XHTML Transitional文档类型看起来不同？

我有两个要素一个简单的页面：为什么元素与应用的XHTML Transitional文档类型看起来不同？

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

来源

2010-08-09 Benny

你的代码是不符合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。

来源

2010-08-09 15:09:01 hitautodestruct

这让我更接近一些，但是元素仍然不完全相同。该文本框大约比选择框高2个像素。 – Benny 2010-08-09 16:26:13

我刚刚浏览了w3schools的XHTML页面，坦白地说，这些建议非常糟糕，在我们看到关于SO的常规问题的所有地方都有关键的遗漏。我不会推荐给任何人。 – Alohci 2010-08-09 19:41:15

选择框始终存在样式问题，请尝试将宽度和高度添加到select以匹配输入。 – hitautodestruct 2010-08-10 07:20:54

不specificying一个DOCTYPE可以把许多浏览器为兼容模式。如果没有真正的调查，我猜没有doctype的页面渲染不正确。尝试在第一个样本上放置文档类型（html4或其他），看看会发生什么。

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

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

来源

2010-08-09 14:39:55

第二个示例是添加了doctype和名称空间的第一个示例。 – Benny 2010-08-09 19:49:21

虽然第一个例子可能是问题所在。如果浏览器以兼容模式呈现它，因为它没有文档类型。 – 2010-08-09 21:54:47

我在说第一个和第二个例子是一样的;第二个例子是解决第一个例子的问题。 – Benny 2010-08-10 13:39:24

为什么元素与应用的XHTML Transitional文档类型看起来不同？

回答

相关问题