Search code examples
htmlcssgoogle-chromewebkitblink

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:

http://cssdeck.com/labs/5vu2eue5

Solution

  • Actually, I found bug report.

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