爲什麼HTML輸入元素被瀏覽器調整大小？

我想在我的網站上做一個簡單的搜索表單，並使用輸入HTML元素。但它的行爲真的很奇怪。爲什麼HTML輸入元素被瀏覽器調整大小？

無論我在樣式中指定了哪種尺寸，它都會被瀏覽器調整大小。在下面的例子中，我有一個寬度爲180px的輸入元素，但瀏覽器將其渲染爲147px。：/

你知道可能是什麼問題嗎？

這裏有一個視頻例子，下面的代碼：http://screencast.com/t/WwqAQDmofhf

<div id="search" style="background-color:#000; height:100px;"> 
    <input style=" background: none repeat scroll 0 0 #FFFFFF; 
        border: medium none; 
        border-radius: 5px 5px 5px 5px; 
        color: #666666; 
        float: left; 
        line-height: normal; 
        margin: 6px; 
        padding: 6px 27px 6px 6px; 
        width: 180px; 
        z-index: 40;" 
      type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" /> 
</div>

來源

2011-08-14 Nebojsa Veron

您的答案中包含的標記和樣式似乎可以在jsfiddle中正常工作，在Firebug和Chrome控制檯的佈局選項卡中顯示180px。 http://jsfiddle.net/userdude/T7J3z/ –

哪個瀏覽器？你有一個文檔類型，或者你在怪癖模式下運行？ – tdammers

當我從'<！DOCTYPE html> - // W3C // DTD XHTML 1.0 Strict // EN「」http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict更改時，它似乎起作用。 '！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」「dtd」>' 「 >'？ –

'寬度'的含義取決於頁面的框模型。傳統寬度包括填充和邊框，但標準模型現在排除它們。

如果您的html中沒有正確的文檔類型，那麼大多數瀏覽器將默認使用傳統框模型，而您將剩下一盒147像素。添加一個doctype可以修復它，並強制其他佈局符合標準。

<!DOCTYPE html> 
<html><head><body> 
<div id="search" style="background-color:#000; height:100px;"> 
    <input style=" background: none repeat scroll 0 0 #FFFFFF; 
        border: medium none; 
        border-radius: 5px 5px 5px 5px; 
        color: #666666; 
        float: left; 
        line-height: normal; 
        margin: 6px; 
        padding: 6px 27px 6px 6px; 
        width: 180px; 
        z-index: 40;" 
      type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" /> 
</div></body></html>

來源

2011-08-14 19:49:10 Sheepy

這可能與做：

padding: 6px 27px 6px 6px;

右填充的27px左填充+ 6像素+報寬度147px = 180像素

您是否嘗試過在瀏覽器中關閉Javascript？

這是否發生在this的例子？

來源

2011-08-14 19:37:13 Gus

我認爲填充是圍繞180px的輸入？它不應該調整輸入大小。 –

爲什麼HTML輸入元素被瀏覽器調整大小？

回答

相關問題