当鼠标悬停时，文本装饰下划线也会旋转

Question

我有一个奇怪的 css 问题，可以在这个 jsfiddle 上看到 https://jsfiddle.net/4x17wLoj/

<ul class="menu">
<li class="hasChildren menuItem">
    <a href="/about-us/our-story.html" class="menuItemLabel">
        Our story
    </a>
</li>
</ul>

.menuItemLabel:before {
   content:"\e008";
   font-family: 'Glyphicons Halflings';
   float: right;
   margin-left: 10px;
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   transition: .05s;
   font-size: 10px;
   width: 10px;
   height: 10px;
   color: black;
}



  .menuItemLabel:hover:before {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    text-decoration: none;
   }

它在所有浏览器上工作正常。但是，在 IE10 上，当我将鼠标悬停在文本上时会显示下划线（没关系）。但是，图标旁边有一条额外的线。我认为这是因为我正在使用 css3 旋转图标。这反过来也会旋转文本下划线。

有什么帮助吗？悬停时，我不希望图标旁边的线。我只想为文本保留文本装饰下划线。

Answer 1

好吧，跨浏览器兼容性意味着大多数时候要尝试处理 IE，对于您的情况，这是解决方法，将以下代码添加到您的 css，让它悬停在下面没有线的地方；

li a:hover {
    text-decoration:none;
}

Answer 2

我使用 overflow:hidden 解决了它

 .menuItemLabel:hover:before {
     overflow:hidden
 }

当鼠标悬停时，文本装饰下划线也会旋转

When mouse hover, the text decoration underline also gets rotated

css

internet-explorer-10