How to beat border glitch in IE7?

Question

css

Good day.
At the moment, I decided to make a couple of layouts in order to improve my knowledge and skills in layout.
There was a problem with the menu.
How it should be (Chrome 32):

How it appears in IE7:

Code:

<nav>
    <ul>
      <li class="active"><a href="">Home</a></li>
      <li><a href="">Apparel</a></li>
      <li><a href="">Fashion</a></li>
      <li><a href="">News</a></li>
      <li><a href="">Portfolio</a></li>
      <li><a href="">Contact</a></li>
    </ul>
</nav>

nav {
  text-align: center;
  border-bottom: 4px solid #d9d9d9;
  border-top: 4px solid #d9d9d9;
}
nav ul {
  margin: 0;
}
nav li {
  display: inline-block;
  *display: inline; /* IE 7, 6 */
}
nav .active a {
  color: #3bbdfb;
}
nav li a {
  display: inline-block;
  padding: 30px 10px;
  color: #111;
  text-decoration: none;
  position: relative;
}
nav li a:hover {
  background: #f7f7f7;
  color: #3bbdfb;
  margin: -4px 0;
  border-bottom: 4px solid #bab7b7;
  border-top: 4px solid #bab7b7;
}

I would be grateful if someone could tell me how to get around this bug.

Answer 1

Maybe it's the notorious hasLayout

Answer 2

Similar to Internet Explorer box model bug . If it is, then just add the DTD to the document. Or manipulate padding instead of margin. Something like

nav li a:hover {
    background: #f7f7f7;
    color: #3bbdfb;
    padding-bottom: 26px;
    border-bottom: 4px solid #bab7b7;
    border-top: 4px solid #bab7b7;
}