gpt4 book ai didi

css - 在 IE 中对 css 生成的内容应用文本装饰

转载 作者:行者123 更新时间:2023-11-28 10:20:27 26 4
gpt4 key购买 nike

IE 似乎不关心为 a:before 伪元素(或伪类)定义的 text-decoration: none;

这是一个 JS fiddle :http://jsfiddle.net/9N35f/
我希望“>”失去下划线。它在 FF、Chrome 和 Safari 中有效,但在 IE 中无效。已使用 IE10 和 IE9 进行测试。

问题:

我可以尝试使 :before 元素失去下划线的任何解决方法吗?最好在 IE9+ 中

某处有关于此的错误报告吗?还是实际上符合标准?

最佳答案

我知道这是一个相当古老的线程,但刚刚在 IE 11 中遇到这个问题,并且无法找到太多帮助,我决定进行试验。在比早期版本显着改进的开发工具的帮助下,我设法弄明白了——无论如何我正在做的事情。尽管您可能需要进行调整,但它很可能也适用于其他人。 YMMV.

HTML:

<li><a href="#">Whatever</a></li>

CSS(在@frnhr 指出我发布的初始版本实际上不起作用后编辑):

a {
display: block;
position: relative;
padding-left: 15px;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:before {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2px);

overflow: hidden;

content: ">";
}

秘诀是设置高度和 overflow: hidden; 行;这意味着下划线仍然存在,但在伪元素提供的视口(viewport)之外,因此永远不会在屏幕上看到。它还适用于其他浏览器(也在 Chrome 和 Firefox 上测试过)。根据您现有的样式,您可能希望调整 calc() 值中的像素值。

参见 http://jsbin.com/biwomewebo/1/edit?html,css,output

关于css - 在 IE 中对 css 生成的内容应用文本装饰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24031948/

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