javascript - 为什么在 Safari 中相同宽度的 Select 和 Input 标签在渲染时会大不相同

Question

我有一个代码，我将宽度设置为 <input>和 <select>动态地使它们看起来相同(宽度方向)。我知道两者之间存在 ~5px 的宽度差异，所以如果我将宽度设置为 <input>到 100px 然后我设置 <select>宽度为 105px；这似乎在任何地方都可以正常工作(chrome 往往会偏离一个像素，但这对我来说很好。)但我最近发现 100px 宽度在 Safari 中不等于 105px 宽度。事实上，它是离谱的。您可以在以下链接中看到它:

http://jsfiddle.net/jH8qC/5/

在 chrome/firefox 上检查它，然后在 Safari 上检查它以查看差异。

然后我想使用 CSS 来修复它

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

保持一致性。这行得通，但如果我像此处看到的那样动态设置宽度，则行不通。

http://jsfiddle.net/jH8qC/6/

有什么想法吗？

Answer 1

您可以通过运行 width() 函数来获取标签的宽度:

var foo = $("#example").width();

您可以获得输入和选择的宽度，然后，如果所需的值为 200(例如)，那么您可以运行如下代码:

$("#example").width(200);