我正在我的网站上实现this设计元素,该元素使用Foundation框架。一切正常,除了在Microsoft Edge和IE中,在不应有的情况下(即,当不与链接进行交互时),在下划线处会出现一个流浪痕。
这是在Codepen中重新创建的代码:
https://codepen.io/andk/pen/JwrVMg
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 50%;
right: 50%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>
请注意单词“一个”下面的点。如何为Edge / IE修复此问题?另外,您知道为什么它仅出现在“一个”而不是其他导航链接上吗?
谢谢!
答案 0 :(得分:0)
将百分比增加超过50%
,以确保宽度为0,这样您就可以避免此错误
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 51%;
right: 51%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>
您还可以像下面那样简化代码,而无需伪元素:
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
background:
linear-gradient(white,white) bottom no-repeat;
background-size:0% 0.125rem;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
background-size:100% 0.125rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>
答案 1 :(得分:-1)
在下面的代码中,我已将width属性添加到正常状态和之后的状态,即'width:0;'和“宽度:100%”。我还使用了“ ease-in-out”而不是“ ease”,并使用了显示属性“ block”和“ inline-block”。
我也在EDGE中进行了测试,并且可以正常工作
这是':: after'和':hover :: after'中的宽度设置,它们进行所需的更改,将前者设置为零,然后设置为100%。
请参阅下面的注释以进行修改
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
display: inline-block; /*added inline-block here */
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
display: block; /* Added display block */
left: 50%;
right: 50%;
width: 0; /* added width property so no dot in EDGE */
transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
border-bottom: 0.125rem solid white;
}
.hover-underline-menu .menu a:hover::after {
width: 100%; /* Added width 100% */
left: 0;
right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>