JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ref">50x50</div>
<ul>
    <li><a href="javascript://">Link 1</a></li>
    <li><a href="javascript://">Link 1</a></li>
    <li><a href="javascript://">Link 1</a></li>
    <li><a href="javascript://">Link 1</a></li>
</ul>
<pre style="margin-top:10px;">
Showing the box-sizing &amp; min-height bug

- On IE9, li's height is 51px
- On Chrome 13, li's height is 51px
- On Firefox 5, li's height is 71px (padding added!!)
</pre>

CSS

.ref{
    background:#f30;
    width: 50px;
    height:50px;
    position:fixed;
    top: 10px;
    left: 10px;
    
}
ul {
    border: 1px solid #000;
}

a{
    display:block;
    min-height: 50px;
    border-bottom:1px solid #ccc;
    padding:10px 10px 10px 68px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;}

a:hover{
    background:#eee;
}