不等於HTML文本框和下拉寬度與XHTML 1.0嚴格

我想有兩個輸入（一個文本框，一個下拉）具有相同的寬度。您可以通過CSS設置寬度，但出於某種原因，選擇框總是小几個像素。似乎這隻發生在xhtml 1.0嚴格的文檔類型關於原因/解決辦法的任何建議/想法？不等於HTML文本框和下拉寬度與XHTML 1.0嚴格

具有以下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>

來源

2008-10-02 Boris Callens

它們爲我在Firefox 2中呈現的寬度完全相同，您使用哪種瀏覽器？ – 2008-10-02 12:09:18

我已經注意到了這一點，並且會對這個答案感興趣... – japollock 2008-10-02 12:12:59

至於什麼瀏覽器：大多數。 – 2009-03-02 15:10:10

你說得對，是有區別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文檔類型相同的大小。

來源

2008-10-02 12:08:37

我在Firefox 2中遇到了這個問題，但似乎在Firefox 3和IE7中解決了這個問題。

我的修復是將缺失的像素添加到單獨的寬度爲select。

來源

2008-10-02 12:09:59 Ross

-1

似乎只有在添加了doctype的情況下才會發生這種情況。更正了這個例子。

來源

2008-10-02 12:27:16

瀏覽器傾向於在表單元素和樣式方面做他們自己的事情。 CSS標準沒有指定瀏覽器應該如何顯示錶單小部件，也不指定應該讓用戶更改哪些CSS屬性。它在瀏覽器之間以及同一瀏覽器中的不同表單小部件之間有所不同。

您可以嘗試調整填充和邊框以幫助匹配不同的表單小部件。

來源

2008-10-02 13:31:54

@保羅D.韋特 - 得到了與你有

同意這不是CSS是爲。例如，查看Safari中的輸入框。它們是橢圓形的。 CSS屬性在某些情況下不適用。

在你的元素周圍填充排列。

來源

2008-10-02 16:21:49

你可以嘗試重置邊距，填充和邊框來看看是否有幫助：

.searchInput { 
    margin:0; 
    padding:0; 
    border-width:1px; 
    width:1000px; 
}

來源

2008-10-03 14:58:33

這似乎有什麼東西做的盒子模型。更具體地說，它似乎與邊界有關。如果您使用的是螢火蟲，請檢查佈局標籤...

該選擇顯示2px邊框，0填充和996px的寬度和18px的高度。
輸入顯示2px邊框，1px 0填充，寬度爲1000px，高度爲16px。

如果將邊框設置爲零（併爲它們指定背景顏色），則可以看到它們的大小相同，這表明它們在佈局選項卡中的寬度均爲1000px。

.searchInput{ 
     width: 1000px; 
     border: 0; 
     background-color: #CCC; 
     overflow: hidden; 
    }

來源

2008-10-03 21:41:02 enobrev

這是由於Box模型的緣故，#IE在doctype中找到「strict」時支持。如果您將其更改爲「傳統」文檔，則一切行爲都會正常進行......但通常不會按照CSS標準進行。

CSS框模型指出，在元素的寬度/高度中，不包括填充和邊框。所以它們在元素的所提到的寬度之上是額外的，因此實際上比期望的大。

來源

2009-02-21 13:48:49

不等於HTML文本框和下拉寬度與XHTML 1.0嚴格

回答

相關問題