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解决了它：隐藏如下

 .menuItemLabel:hover:before {
     overflow:hidden
 }

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

2 个答案: