css - 为什么ie7缺少文字装饰: underline on mouse over?

Question

为什么 ie7 不在鼠标悬停时应用 text-decoration: underline？

<style type="text/css">
<!--

.main{
     padding: 0 10px;
     height:45px;
     float:left;
     color:#191919;
     text-align:center;
     overflow:hidden;
     list-style: none;
     text-decoration: none;
}

.main:hover{
     padding: 0 10px;
     height:45px;
     float:left;
     color:#191919;
     text-align:center;
     overflow:hidden;
     list-style: none;
     text-decoration: underline;
}

-->
</style>


<li class="main" style=" float: right; ">
   <p style=" color: #555; cursor: pointer;">
      <a style=" color: #555; text-decoration: none;" href="test.php">TEST</a>
   </p>     
</li>

Answer 1

IE 7 实现 text-decoration在某些情况下是错误的:设置 text-decoration: none在内部元素上可能会阻止在外部元素上设置的下划线出现在内部元素下方。直观上可以理解，但有悖于规范。

作为解决方法，为外部元素和内部元素设置下划线。

对于问题中的乱码，最小的解决方法是添加以下 CSS 规则:

.main:hover a { text-decoration: underline !important; }

在此修复中，!important需要说明符，因为内部元素有 text-decoration设置在 style属性。