inline-block overlaps container's border in Chrome

Why inline-block overlaps container's bottom border in Chrome in following test-case?

HTML:

<ul>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
</ul>

CSS:

ul {
  border-bottom: 1px solid red;
  font-size: 12px;
}
li a {
  display: inline-block;
  padding: 0.4em;
  background: yellow;
}

test-case:


ANSWERS:


Actually, I found bug report.

Please, star this issue, if you are experiencing the same.


If you don't care about bullet points you can clear that with vertical-align:bottom on the link element :

li a {
    vertical-align:bottom;
}

It is all about calculating the em elements. Use round values in em like(0.5em, 1em..), it will give proper results.

li a {
display: inline-block;
padding:0.5em;
background: yellow; 
} 

DEMO



 MORE:


 ? How do I use RtcPeerConnection to connect with other instances?
 ? rtmpt(e) stream on SSL Page
 ? jquery selector "contains" making error while using in chrome
 ? Content script on chrome error page
 ? Google Maps - Resource interpreted as Script but transferred with MIME type image/png
 ? display: inline-block not working correctly in Chrome?
 ? Chrome and Firefox overflow:hidden jumping elements
 ? Chrome and Firefox overflow:hidden jumping elements
 ? Chrome and Firefox overflow:hidden jumping elements
 ? Press Tab from input shifts the input up in Chrome only