html - 如何让最小宽度在 Chrome 中的按钮上工作？ (苹果系统)

Question

七年前有人问过一个相关问题，最后一次(不幸的是对我没有帮助)回复是在 2015 年:Does `min-width` not work on form `input[type="button"]` elements?

我希望现在有更好的答案。

我有这个非常简单的 CSS:

button {
  min-width: 80px;
}

正在完成的操作被忽略了，至少 macOS 上的 Chrome 是这样(它适用于 Firefox，Windows 上的 Chrome)。如果我检查其中一个按钮，min-width 属性确实已设置，但它什么也没做。

上面旧线程中提到的一些技巧可以工作，但它们有不需要的副作用。例如，显式设置 width 和 min-width 会产生效果，但带有长文本的按钮会自动换行，而不是变宽。

更改边框颜色是可行的(奇怪的是，它会做任何事情)，但它会搞砸边框的圆 Angular ，并且可能无论如何都不会在浏览器之间保持一致。

那么，现在几年过去了，有没有人知道让 min-width 为 macOS 上的 Chrome 中的按钮工作的更好技巧？

Answer 1

你在使用 <input type="button" value="save" /> 或 <button>Save</button> ？

两个 css 都为我工作。尝试这个。它会帮助你。

input[type='button'] { min-width: 180px;}
button { min-width: 180px; }