Firefox overflow:hidden not working as it does in Chrome/IE

Question

I've been trying to achieve cross-browser functionality for a drag/drop input file, i've come pretty close but this last thing i can't quite figure out. As the title says, it's working just fine in Chrome / IE but in firefox it's not behaving the same. I've left out the drag/drop functionality in my fiddle for simplicity as it's not relevant to the problem.

<div class='browseWrapper'>
    Drag & Drop Images Here</br><em>Or click to browse.</em>
    <input class='browseImage' type='file' />
</div>

Here's what i've got so far: http://jsfiddle.net/sPJ9u/

Thanks in advance.

EDIT: Sorry i should have been clearer in explaining the problem. If you inspect the input element in firefox you'll see that the overflow:hidden isn't hiding the overflow as it does in Chrome / IE, causing the offset to be out.

Firefox Version: 26

Answer 1

Check out this related question: Why does overflow:hidden not work in a <td>?

It's because you have display set to table-cell, which makes it behave as if the div is actually a td.

Answer 2

您可以在CSS中使用以下结构：

-moz-overflow:hidden;