为什么Safari中相同宽度的“选择和输入”标签在渲染时差异巨大

Why same width Select and Input tag in Safari is outrageously different while rendering

本文关键字：标签 选择和输入 巨大 时差 输入 Safari 选择 为什么      更新时间：2023-09-26

我有一个代码，其中我动态设置<input>和<select>的宽度，使它们看起来相同（按宽度）。我知道两者之间有大约5px的宽度差异，所以如果我将<input>的宽度设置为100px，那么我将<select>的宽度设为105px；这似乎在任何地方都很好（chrome往往会减少一个像素，但这对我来说很好。）但我最近发现，在Safari中，100px的宽度并不等于105px的宽度。事实上，它是惊人的关闭。你可以在下面的链接上看到它：

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

在chrome/ffirefox上查看，然后在Safari上查看差异。

然后我想用CSS来修复这个

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

以保持一致性。这是有效的，但如果我像这里看到的那样动态设置宽度，就不行了。

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

知道吗？

您可以通过运行width（）函数来获取标签的宽度：

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

你可以得到你的输入和选择的宽度，然后，如果想要的值是200（例如），那么你可以运行这样的东西：

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

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

-webkit-appearance: none;

延迟回答：）尝试将其添加到您的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;
}

您的jQuery不好，这里有一个Fiddle

$(function() {
  $(".txt1").css({ width: '170px'});
  $(".sel1").css({ width: '175px'});
});
相关文章：