Buttons & links with same styles and content don't line up - css

Question

I'm trying to style each button and a.btn to look the same across all browsers. Using the following styles the 2 elements don't line up in Chrome and Firefox.
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
<div id="wrap">
Link
<button>Link</button>
</div>
I've tried changing the vertical-align to bottom, but while that does move the elements into a more aligned state, the text on the button itself looks mis-aligned still (demo below).
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
vertical-align: bottom;
}
<div id="wrap">
Link
<button>Link</button>
</div>
How can I make both elements display the same way in both Chrome and Firefox?

Answer 1

Erase the height setting from the rule and fine-tune the height only with the paddingparameters:
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
<div id="wrap">
Link
<button>Link</button>
</div>

Answer 2

Chrome and Firefox both use different rendering engines to display html (Chrome uses Blink and Firefox uses Gecko). Different browsers use different rendering engines so I don't think it will look exactly the same across all browsers.