Input box breaks on zooming

Question

When I zoom out in my browser, the lower border of an input box for my web page disappears in chrome. IE and FF look fine. Not sure how to fix it. Changing the height fixes things in chrome, but breaks it in FF.

The input text tag is inside a div. I'm not restricting the height for either of them. However, I am setting the font to 1.0 rem; for both.

Answer 1

I figured out the answer to my problem. Here's the piece of code:

<div style="overflow:hidden;">
    <div>
        <input type="text"></input>
    </div>
</div>

It was the "overflow:hidden" style that was causing the problem. After removing it, the issue got fixed. Here's a jsfiddle for the problem. Just zoom out a little in chrome, and the lower border of the input text disappears.