导航与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;
}

这是导航li的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;
}

有什么CSS技巧可以让我在IE8上工作吗？

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;
}