Javascript 为什么Safari中相同宽度的选择和输入标记在渲染时会有惊人的不同

我有一个代码，我在其中动态设置

和

的宽度，使它们看起来相同（宽度方向）。我知道两者之间存在~5px的宽度差异，因此如果我将

的宽度设置为100px，那么我将

宽度设置为105px；这似乎在任何地方都能很好地工作（chrome往往会被关闭一个像素，但这对我来说很好。）但我最近发现，在Safari中，100px的宽度并不等于105px的宽度。事实上，这是离谱的。您可以在以下链接中看到它：

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

然后我想用CSS来解决这个问题

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

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

---

有什么想法吗？

你的jQuery不好，这里有一个

---

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

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

您可以获得输入和选择的宽度，然后，如果所需的值为200（例如），则可以运行如下操作：

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

---

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

-webkit-appearance: none;

---

你使用CSS重置吗？是的，我使用。为了安全起见，我还在normalize.css上对其进行了测试。在Safari for Windows 5.1.7上进行了测试。虽然您的解决方案有效，但我仍然很好奇为什么在这种情况下.width（）不起作用，而只有.css（）起作用。css（width）和.width（）之间的区别在于后者返回的像素值少了一个单位（例如，400）而前者返回一个单位完整的值（例如，400px）。当需要在数学计算中使用元素的宽度时，建议使用.width（）方法。-这就是jQuery页面所说的。但问题似乎出在SafariJS引擎的width（）函数上。这是一只虫子。我使用outerWidth（）纠正了我的问题。在Google Chrome中查看您的浏览器，现在您的选择字段比输入字段长约4倍，为什么您不想使用.css

-webkit-appearance: none;