css - 为什么ie7缺少文本修饰:鼠标悬停在下划线上？

为什么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>

最佳答案

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

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

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

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

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

关于css - 为什么ie7缺少文本修饰:鼠标悬停在下划线上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20811227/