gpt4 book ai didi

html - Internet Explorer 在链接中显示不需要的空间

转载 作者:行者123 更新时间:2023-11-28 12:43:34 25 4
gpt4 key购买 nike

我有一个链接,它在悬停时有一个过渡。

这是 jsfiddle 示例:http://jsfiddle.net/Forresty/qc4rev6q/

将鼠标悬停在 Chrome、Firefox 或 Opera 中的链接上,您会看到它按预期运行。

但是,在 Internet Explorer 11 中,悬停边缘的某处总是有一个微小的间隙。对我来说完全是无稽之谈。这只是一个浏览器错误吗?或者我可以做些什么来解决这个问题?

HTML

<a href="#" class="font_smooth btn btn_about">
<span class="btn_text_onTop">LINK</span>
</a>

CSS

.btn {
position: relative;
display: inline-block;
border: none;
font-family: fira sans;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.125em;
font-weight: 700;
}
.btn_about {
color: #000;
font-size: 0.8em;
background: none;
font-size: 1.5em;
padding: 1.5em 3.5em;
//display: inline-block;
margin: 1.875em auto 0;
transition: all 0.3s;
border: 0.1875em solid #000;
overflow: hidden;
}
.btn_text_onTop {
position: relative;
z-index: 2;
}
.btn_about:after {
content:'';
position: absolute;
width: 0%;
height: 100%;
top: 0;
left: 0;
background: black;
z-index: 1;
transition: all 0.3s;
}
.btn_about:hover, .btn_about:active {
color: white;
}
.btn_about:hover:after, .btn_about:active:after {
width: 100%;
}

在我刚刚链接的示例中,悬停的右侧未被覆盖。但是,在实际站点上,它会根据 padding 的大小而有所不同。有时是左、右和底部,有时是底部,在这种情况下是右侧。

提前致谢

最佳答案

那些似乎是四舍五入的差异,来自 0.1875em border-width ...... IE 开发工具将计算值显示为 4.32px - 只要我将其替换为4px 在你的 CSS 中,效果消失了。

因此,如果您可以接受绝对值,请使用一个,它应该是固定的。如果不是,至少尝试找到一个值,该值确实为不同的字体大小提供“更圆”的像素值。

关于html - Internet Explorer 在链接中显示不需要的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25818337/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com