Text field in safari browser don't stay equal on height to button beside when zooming out

Question

I have a text field with a image button next to it. When I zoom out in Safari Browser the text field isn't equal on height to the image button beside it. I only have this problem on the Safari Browser and not in IE, Mozilla, Chrome, and 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;
}

Screenshots
first: Chrome no zoom
second: Chrome zoom-out
third: Safari no zoom
fourth: Safari zoom-out

Demo

So do anyone know a way to fixed this?

Answer 1

I Think the problem is due to the fact that Safari uses only int values to position it's elements and the other browsers uses floats values... So when you zoom the value is rounded for all browsers except Safari. So I suggest you to use the same size to your inputs like set a height: 36px; to your form input[type=text] (note that you'll need to use a padding: 0px; in that case). So your CSS began:

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

I hope it will work. Have a nice day =) !