<input type =「submit」/>和<input type =「text」/>

之間的框模型不一致我意識到<input type="submit"/>有一個border-box框模型，而<input type="text"/>有一個content-box框模型。這種行爲存在於IE8和FF中。不幸的是，這讓我無法將這種風格很好的均勻大小的輸入：<input type =「submit」/>和<input type =「text」/>

input, textarea 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
}

是由IE和FF這個正確的行爲？有沒有一個跨瀏覽器解決這個問題的方法？

來源

2009-09-20 Eric

這也是Chrome瀏覽器的情況下，所以我認爲必須假定這一行爲ALS「設計」。 Chrome在調試器中顯示它是「用戶代理樣式」，它顯示： 'input：not（[type =「image」]），textarea - border-box' – Rolf

這是IE和FF的正確行爲嗎？

在標準中，表單字段裝飾是如何由CSS控制的，並沒有真正說明。最初他們被實現爲操作系統小部件，在這種情況下，邊界框大小將有意義。後來的瀏覽器遷移到使用CSS邊界/ padding /等渲染小部件，在這種情況下，內容框大小將有意義。某些瀏覽器（IE）將表單字段渲染爲兩者的混合，這意味着您最終可以選擇與文本字段不匹配的框。

是否有跨瀏覽器解決此問題的方法？

關於你能做的最好的就是告訴它你上漿想手動使用CSS3的瀏覽器：

box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box;

（不能在IE6/7，IE8或怪癖或兼容模式時工作。）

來源

2009-09-20 09:19:17 bobince

IE 6/7/8在怪癖模式中總是使用邊框盒模型。 –

所以我們已經走完了。它需要17年的Internet Explorer怪異模式抨擊;但我們正在回到最初的Netscape模型*嘆息* –

你有兩個選擇，如果你寫輸入CSS代碼來解決這個問題 1），它適用於所有的輸入element.Instead使用此爲他們的埃弗特之一，只爲特定類型的

 
input[type="submit"],input[type="text"] 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
}

做

2）我重置已知標記名稱後，總是使用類聲明。

 
.MySubmit 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
}

，並使用它像

<input type="submit" class="MySubmit" />

我希望這有助於。

來源

2009-09-20 09:05:10 Myra

不知道ie6是否支持這些選擇器 –

有一個CSS只判明

div.search input[type="text"] { width: 110px; margin: 0; background-position: 0px -7px; text-indent:0; padding:0 15px 0 15px; } 
/*ie9*/ div.search input[type="text"] { border-left: 25px solid transparent; } 
/*ie8*/ div.search input[type="text"] { border-left: 25px solid transparent; background-position-x: -16px; padding-left: 0px; line-height: 2.5em;}

感謝穆罕默德與Atif Chughtai

來源

2013-03-14 11:54:46 user2169658

今天，您不必再爲填充技巧而煩惱了，因爲相關的瀏覽器瞭解盒子大小的標籤。你可以指定邊界框和內容框來聲明你想要的模型。你只需要記住輸入（除了type = image）和textarea默認是邊框。 – Rolf

我已經使用這個CSS解決方案來獲得相同的按鈕和文本高度;它適用於IE，FF和Chrome。基本上，這個想法是強制輸入元素的高度大於默認的框高。對文本和按鈕執行此操作：

將頁邊距和填充設置爲0.這會給出儘可能小的「自然」框。
將垂直對齊設置爲中間。這將補償padding = 0，以便在文本上方/下方獲得空格。
使用高度/寬度來控制文本和按鈕的尺寸。文字高度必須比字體高度大幾個像素（以覆蓋默認的框尺寸）。由於文本和按鈕框模型之間的差異，按鈕高度必須比文本大2個像素。

例子：

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; } 
input[type="submit"] { height:32px; }

來源

2014-10-10 19:03:18 Lambtron

<input type =「submit」/>和<input type =「text」/>

回答

相關問題