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

Question

我有一个代码，我在其中动态设置 和 的宽度，<input>以<select>使它们看起来相同（宽度方向）。我知道两者之间存在约 5 像素的宽度差异，所以如果我将宽度设置<input>为 100 像素，那么我将<select>宽度设置为 105 像素；这似乎在任何地方都可以正常工作（chrome 往往会偏离一个像素，但这对我来说很好。）但我最近发现 Safari 中的 100px 宽度不等于 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);

Answer 2

我可以通过使用以下 CSS 关闭 Safari 的视觉增强功能来解决这个问题：

-webkit-appearance: none;

Answer 3

迟到的答案:) 尝试将此添加到您的 CSS 文件中：

input, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field {
    padding: 0;
}

Answer 4

你的 jQuery 不好，这是一个小提琴

$(function() {
  $(".txt1").css({ width: '170px'});
  $(".sel1").css({ width: '175px'});
});