Html safari浏览器中的文本字段don'；缩小时，不要与旁边的按钮保持高度相等

我有一个文本字段，旁边有一个图像按钮。在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>

第一：Chrome无缩放
第二：Chrome缩小
第三：Safari无缩放
第四：狩猎缩小

---

有人知道解决这个问题的方法吗？

我认为问题是因为Safari只使用int值来定位元素，而其他浏览器使用浮点值。。。因此，缩放时，除Safari之外的所有浏览器的值都是四舍五入的。 因此，我建议您对输入使用相同的大小，比如设置a

height:36px

到您的

表单输入[type=text]

（注意，在这种情况下，您需要使用

填充：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;
}

---

我希望它能起作用。祝你今天愉快

好奇，我在运行Safari，我没有看到任何问题。。。您是否尝试简单地设置

边距：0px

到您的

表单输入[type=image]

？仍然存在相同的问题。。你确定要缩小到最大值吗？我试图放大JSFIDLE，但显然不可能（这是可能的，但视图中什么也没有发生）。。。我的错，你解决了，非常感谢！如此简单却又如此有效，这也是一个很好的解释。

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;
}