不严格的HTML文本框和XHTML 1.0严格的下拉宽度
我正在尝试使两个输入(一个文本框，一个下拉菜单)具有相同的宽度。
我们可以通过css设置宽度，但是由于某些原因，选择框始终要小几个像素。
似乎只有xhtml 1.0严格doctype会发生这种情况
关于原因/解决方法有什么建议/想法吗？
具有以下HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.searchInput{
width: 1000px;
overflow: hidden;
}
</style>
</head>
<body>
<form action="theAction" method="post" class="searchForm" >
<fieldset>
<legend>Search</legend>
<p>
<!--<label for="name">Product name</label>-->
<input class="searchInput" type="text" name="name" id="name" value="" />
</p>
<p>
<!--<label for="ml2">Product Group</label>-->
<select class="searchInput" name="ml2" id="ml2">
<option value="158">INDUSTRIAL PRIMERS/FILLERS</option>
<option value="168">CV CLEAR COATS</option>
<option value="171">CV PRIMERS/FILLERS</option>
<option value="" selected="selected">All</option>
</select>
</p>
<input type="submit" class="search" value="Show" name="Show" id="Show" />
<input type="reset" value="Reset" name="reset" id="reset" class="reset"/>
</fieldset>
</form>
</body
</html>
解决方案
没错，两者之间有4像素的差异。输入的宽度为103像素，而选择的宽度为99像素。我不知道为什么会这样，但是我们可以这样解决：
<style type="text/css">
.searchInput {
overflow: hidden;
}
select.searchInput {
width: 101px;
}
input.searchInput {
width: 97px;
}
</style>
这真的很愚蠢，如果有人知道为什么会发生这种情况以及防止这种情况发生的方法，我将非常感兴趣。
解决方法适用于Webkit和Firefox。 IE中的像素差异不同。
有趣的是，使用HTML doctype时，它们的大小通常相同。
我在Firefox 2中遇到了这个问题，但在Firefox 3和IE7中似乎可以解决。
我的解决方法是将丢失的像素添加到"选择"的单独宽度中。
似乎只有在添加doctype的情况下才会发生这种情况。
更正了示例。
浏览器倾向于在表单元素和样式方面做自己的事情。 CSS标准未指定浏览器应如何显示表单小部件，也未指定应允许用户更改的CSS属性。在不同的浏览器之间，以及在同一浏览器中的不同表单小部件之间，它是不同的。
我们可以尝试调整填充和边框，以帮助匹配不同的表单小部件。
@Paul D. Waite在那里同意你的看法
这不是CSS的意思。例如，查看Safari中的输入框。他们是椭圆形的。 CSS属性只是在某些情况下不适用。
在元素周围填充以使其对齐。
我们可以尝试重置边距，填充和边框，以查看是否有帮助：
.searchInput {
margin:0;
padding:0;
border-width:1px;
width:1000px;
}
这似乎与盒子模型有关。更具体地说，它似乎与边界有关。如果我们使用的是萤火虫，请查看布局标签...
选择显示2px边框，0填充和996px的宽度以及18px的高度。
输入显示2px边框，1px 0填充以及1000px的宽度和16px的高度。
如果将边框设置为零(并为它们提供背景颜色)，则可以看到它们的大小相同，这在布局选项卡中显示为宽度均为1000px。
.searchInput{
width: 1000px;
border: 0;
background-color: #CCC;
overflow: hidden;
}
由于#IE在doctype中找到" strict"时支持的Box Model，因此它的确是正确的。如果我们将其更改为"传统"文档类型，则所有内容均正常运行，但不是按照CSS标准正常运行。
CSS Box Model指出，在元素的宽度/高度中不包括填充和边框。因此，它们是在元素的上述宽度之上添加的，因此比实际所需的要大。
