XHTML 1.0嚴格的不等Html文本框和下拉寬度
[英]Unequal Html textbox and dropdown width with XHTML 1.0 strict
問題描述
我試圖讓兩個輸入（一個文本框，一個下拉）具有相同的寬度。 您可以通過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>
8 個解決方案
解決方案1
5 2008-10-03 14:58:33
你可以嘗試重置邊距，填充和邊框，看看是否有幫助：
.searchInput {
margin:0;
padding:0;
border-width:1px;
width:1000px;
}
解決方案2
3 2008-10-03 21:41:02
這似乎與盒子模型有關。 更具體地說，它似乎與邊界有關。 如果您使用的是firebug，請查看布局選項卡...
選擇顯示2px邊框，0填充和寬度為996px，高度為18px。
輸入顯示2px邊框，1px 0填充，寬度為1000px，高度為16px。
如果將邊框設置為零（並為它們提供背景顏色），則可以看到它們的大小相同，在布局選項卡中顯示寬度為1000px的大小。
.searchInput{
width: 1000px;
border: 0;
background-color: #CCC;
overflow: hidden;
}
解決方案3
0 2008-10-02 12:08:37
你是對的，有4px的差異。 input寬度為103px，而select寬度為99px。 我不知道為什么會這樣，但你可以像這樣解決它：
<style type="text/css">
.searchInput {
overflow: hidden;
}
select.searchInput {
width: 101px;
}
input.searchInput {
width: 97px;
}
</style>
這真的很傻，如果有人知道為什么會這樣，我真的很感興趣，並且有辦法防止這種情況發生。
該解決方案適用於Webkit和Firefox。 IE中的像素差異不同。
有趣的是，它們通常使用HTML文檔類型相同。
解決方案4
0 2008-10-02 12:09:59
我在Firefox 2中遇到過這個問題，但它似乎在Firefox 3和IE7中得到了解決。
我的修復是將缺少的像素添加到select的單獨寬度。
解決方案5
0 2008-10-02 13:31:54
瀏覽器傾向於在表單元素和樣式方面做自己的事情。 CSS標准沒有規定瀏覽器應該如何顯示表單小部件，也不指定應該讓用戶更改哪些CSS屬性。 它在瀏覽器之間以及同一瀏覽器中的不同表單小部件之間有所不同。
您可以嘗試調整填充和邊框以幫助不同的窗體小部件匹配。
解決方案6
0 2008-10-02 16:21:49
@Paul D. Waite - 在那里同意你的看法
這不是CSS的意思。 例如，查看Safari中的輸入框。 它們是橢圓形的。 CSS屬性在某些情況下不適用。
在元素周圍填充以排列它們。
解決方案7
0
它是由於#IE在doctype中找到“strict”時支持的Box模型而定義的。 如果您將其更改為“傳統”doctype，則一切行為都正常...但通常不符合CSS標准。
CSS Box Model聲明在元素的寬度/高度中不包括填充和邊框。 因此，它們在所提到的元素寬度之上是附加的，因此實際上比期望的大。
解決方案8
-1 2008-10-02 12:27:16
似乎只有添加了doctype才會發生這種情況。 更正了示例。
是否有任何專業人士使用HTML 4.01嚴格超過XHTML 1.0 strict（content =“text / html）？
[英]Are there any pros to use HTML 4.01 strict over XHTML 1.0 strict (content="text/html)?
在content =“ text / html;上的HTML 4.01strict上使用XHTML 1.0 strict的專業人士是什么？
[英]What are pros to use XHTML 1.0 strict with content="text/html; over HTML 4.01 strict?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
XHTML STRICT 1.0表格
如何重寫此HTML以驗證XHTML 1.0 Strict？
XHTML 1.0 Strict 中的自定義數據
XHTML Strict 1.0 頁面的 Enctype
是否有任何專業人士使用HTML 4.01嚴格超過XHTML 1.0 strict（content =“text / html）？
在content =“ text / html;上的HTML 4.01strict上使用XHTML 1.0 strict的專業人士是什么？
我在 xhtml strict 1.0 驗證時遇到問題
XHTML 1.0 Strict：表單/ javascript問題
XHTML 1.0 Strict中圖像下方的不需要的間距
XHTML Strict 1.0 / CSS中的Mozilla Float Bug
相關標簽