How to fill the anchor element's height to 100% in html?

I have created a top bar that have height: 50px, then an anchor element inside it, the anchor element with it's padding supposed to be exact as the top bar height.

Testing the code in major browsers, Firefox has given the exact pixels height of top bar to anchor element, but in Chrome and IE, it have -1px result. Fiddle Here

HTML:

<div > <a href="">Text Here</a> </div>

CSS:

div {
    width: auto;
    height: 50px;
    background-color: #333;
}
a {
    padding: 10px;
    display: inline-block;
    font-size: 24px; /* Adjusting this would affect element block size */
    color: white;
    font-family:'Bebas Neue';
    background-color: #777;
}
a:hover { background-color: green; }

How could I fill the dimensions of the <a> anchor element up to the div's height?