缩小时，Safari 浏览器中的文本字段与旁边的按钮的高度不相等

Question

我有一个文本字段，其旁边的图像按钮。当我在Safari浏览器中缩小时，文本字段在高度上与旁边的图像按钮不等。我只在Safari浏览器上有这个问题，而不是IE，Mozilla，Chrome和Opera。

html

<form>
    <input type="text" name="search_bar">
    <input type="image" src="http://www.somerandomdude.com/wp-content/uploads/search-icon.png">
</form>

CSS

form input[type=text]{
    float: left;
    width: 200px;
    height: 34px;
    border: none;
    outline: none;
}
form input[type=image]{
    float: left;
    width: 36px;
    height: 36px;
}

屏幕截图
第一：铬no Zoom
第二：Chrome缩放
第三：Safari no Zoom
第四：野生动物园缩放

演示

所以有人知道一种修复方法吗？

Answer 1

我认为问题是由于Safari仅使用int值来定位其元素，而其他浏览器则使用浮点值...因此，当您缩放时，当您缩小值时浏览器除了Safari。因此，我建议您使用与输入相同的大小，例如将height: 36px;设置为form input[type=text]（请注意，在这种情况下，您需要使用padding: 0px;）。因此，您的CSS开始：

body{
    background: #4679bd;
}
form input[type=text]{
    float: left;
    width: 200px;
    height: 36px;
    border: none;
    outline: none;
    padding: 0px;
}
form input[type=image]{
    float: left;
    width: 36px;
    height: 36px;
}

我希望它能起作用。祝您有美好的一天=）！