我试图让两个输入(一个文本框,一个下拉)具有相同的宽度.您可以通过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>
你可以尝试重置边距,填充和边框,看看是否有帮助:
.searchInput {
margin:0;
padding:0;
border-width:1px;
width:1000px;
}
你是对的，有 4px 的差异。宽度input为 103 像素，宽度select为 99 像素。我不知道为什么会发生这种情况，但你可以像这样解决它：
<style type="text/css">
.searchInput {
overflow: hidden;
}
select.searchInput {
width: 101px;
}
input.searchInput {
width: 97px;
}
</style>
这真的很愚蠢，如果有人知道为什么会发生这种情况以及防止这种情况发生的方法，我会非常感兴趣。
该解决方法适用于 Webkit 和 Firefox。IE中的像素差异是不同的。
有趣的是，使用 HTML 文档类型时它们通常具有相同的大小。
| 归档时间： |
|
| 查看次数： |
8697 次 |
| 最近记录： |