`min-width`不能在form`input [type =「button」]`元素上工作嗎？

任何人都可以看到這個不起作用的原因嗎？（帶width工作的，只是沒有min-width）`min-width`不能在form`input [type =「button」]`元素上工作嗎？

input[type="button"] { 
    min-width: 100px; 
}

編輯：澄清

「按鈕」選擇器的工作原理與width，只是不min-width
min-width作品與其他元件，只是沒有「按鈕」選擇器
這是在 chrom E/Safari瀏覽器。不是IE問題。

來源

2010-11-24 Yarin

在什麼瀏覽器？ – SLaks 2010-11-24 16:03:16

猜測IE <= 6？ – hunter 2010-11-24 16:03:43

min-width不支持和/或在早期版本的Internet Explorer中有問題。您可以看到一個compatibility table here。

以下是在form元素上使用的min-width的示例，將width屬性也設置爲它總是明智的。

<html> 
<head> 
<title>TAG index</title> 

<style type="text/css"> 

.example { 
    width: 100%; 
    max-width: 600px; 
    min-width: 500px; 
} 

textarea { 
    height: 10em; 
} 

</style> 

</head> 

<body> 

<p>minimum width:500px - maximum width:600px</p> 

<form method="POST" action="example.cgi"> 

    <p><input type="text" name="item1" class="example"></p> 

    <p><select name="item2" class="example"> 
    <option value="select1">Select1</option> 
    <option value="select2">Select2</option> 
    <option value="select3">Select3</option> 
    </select></p> 

    <p><textarea name="item3" cols="50" rows="10" class="example"></textarea></p> 

</form> 

</body> 
</html>

來源

2010-11-24 16:05:31 Latox

是......它確實工作提供了你的風格是這樣：

input[type="submit"], button, .button, a.actionlink { 
    cursor: pointer; 
    display: inline-block; 
    font-family: "Arial","Verdana","Helvetica","sans-serif"; 
    font-size: 12px; 
    font-weight: bold; 
    min-width: 85px; 
    -moz-outline: 0 none; 
    outline: 0 none; 
    padding-bottom: 7px; 
    padding-top: 7px; 
    text-align: center; 
}

來源

2012-09-24 21:40:07

最小寬度應很好地工作，你就不能看到效果也許是因爲你做最小寬度少比寬度..無論如何罰款html代碼示例：

<input type="button" style="width:50px;height:5em;min-width:40px;"

來源

2012-10-26 01:54:37

我剛剛遇到了這個問題。 min-width確實有效，但由於按鈕的默認box-sizing的值爲border-box，可能無法爲您提供預期的結果或可能看起來不起作用。嘗試在按鈕上設置box-sizing: content-box。

來源

2013-08-24 23:30:40 Josh

在調查this answer時，我發現改變按鈕的border-color屬性還會啓用Chrome中的min-width CSS屬性。（它也禁用了幾個內置的屬性，如默認的按鈕背景顏色，所以請謹慎使用。）

來源

2013-11-15 16:44:11 Blazemonger

我剛剛遇到過這樣的問題，並找到解決的方法。但使用按鈕標籤，而不是輸入。

input[type="button"] { 
    min-width:100px; 
}

- [變化] - >

button { 
    width:auto; 
    min-width:100px; 
}

來源

2015-09-15 03:27:15

`min-width`不能在form`input [type =「button」]`元素上工作嗎？

回答

相關問題