Question

我有一个代码，我动态设置<input>和<select>的宽度，使它们看起来相同（宽度方向）。我知道两者之间有大约5px的宽度差异，所以如果我将<input>的宽度设置为100px，那么我将<select>宽度设置为105px;这似乎在任何地方工作得很好（铬往往被一个像素关闭，但这对我很好。）但我最近发现在XP中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

你的jQuery很糟糕，这里是Fiddle

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

为什么Safari中的相同宽度选择和输入标签在渲染时非常不同

3 个答案: