导航与IE 8不兼容

Question

我不知道为什么这对ie8不能正常工作。

<div id="bluemenu" class="bluetabs">
<ul>
<li class="">
  <a rel="dropmenu3_c" href="company/">Company 
    <span><img width="11"height="7" src="images/arrow_btn.png"></span>
  </a>
</li>
</ul>
</div>

这是导航ul的css

.bluetabs ul {
color: #FFFFFF;
float: right;
font: 13px 'Open Sans','Lucida Grande',Arial,"Verdana sans-serif";
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
text-transform: uppercase;
}

这是导航li的css

.bluetabs li {
display: inline;
float: left;
height: 36px;
margin: 0;
padding: 0;
}

这是导航的css

.bluetabs li a {
background: url("../images/menu_nav_hover_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
margin: 0;
padding: 5px 15px;
text-decoration: none;
}

我可以在IE 8上使用任何CSS黑客吗？

Answer 1

我可以在本地重现这一点，但并非完全如此。 要在黑暗中拍摄......

尝试：

.bluetabs li a {
  background: #ccc;
  color: #FFFFFF;
  margin: 0;
  padding: 5px 15px;
  text-decoration: none;
  display: inline-block; /* Add this */
}

/* Add this */
.bluetabs li a > span {
  display: inline-block;
}