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

尝试将溢出更改为可见，只是为了查看它是否显示在ie7中。还要添加！important。

另外，你的悬停中有很多额外的行是没有必要的，因为它们与你的.main相同。因此，如果需要，可以通过删除这些行来清理它。

.main:hover{
         padding: 0 10px;  //you don't need this line
     height:45px; // nor this one
     float:left; // nor this one
     color:#191919;  //nor this one
     text-align:center; // nor this one
     overflow: visible;
         list-style: none; // nor this one
         text-decoration: underline !important;
}

Answer 2

您是否尝试在实际锚标签上应用该样式？

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

Answer 3

我相信在较新版本的CSS中，文本修饰值从只有一个输入转换为多个输入，即使用“颜色，线条和样式”的能力。使用MDN作为参考，它表明文本修饰现在被认为是IE中不再支持的“速记属性”。更多信息可在我在文中提供的链接中找到。

我认为另一种方法是使用text-decoration-style，它更具体，应该得到支持。

我希望这是正确的，如果没有..我可以删除它：）

Answer 4

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

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

对于问题中的混乱代码，最小的修复是添加以下CSS规则：

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

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

Answer 5

使用此：

text-decoration: underline !important;

为什么ie7缺少文本修饰：鼠标悬停下划线？

5 个答案: