`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”]`元素上工作吗？

回答

相关问题