嵌入式块链接在Microsoft Edge中不起作用

我遇到了Microsoft Edge中的一个错误，其中<a>标记无法点击。我已经成功地提炼出它在这里最简单的例子：嵌入式块链接在Microsoft Edge中不起作用

a { 
 
    visibility: hidden; 
 
    display: inline-block; 
 
} 
 

 
a::after { 
 
    visibility: visible; 
 
    content: "more"; 
 
}

<span> 
 
    <a href="#">go!</a> 
 
</span>

如果任何人有任何想法，我会很感激。谢谢！

来源

2015-11-04 jsnelgro

想法？当然，不要让它看不见。但那不是你的意思？现在严重，你想解决什么问题？我猜你无法更改HTML，所以你想用CSS来改变链接文本？ –

正确，无法更改html。该内容需要在:: after伪类中替换，并且原始“”的样式需要隐藏。 – jsnelgro

@johnnysnel我很好奇，为什么你不能改变标记？在':: after'元素中填充内容并*隐藏*主元素对于可访问性来说不是很好。 – Sampson

声明：我在这里使用的是IE11，但它与Edge描述的问题相同，所以我希望这个解决方案也能在那里工作。
虽然这有点破绽;如果有更好的解决方案出现，我会很乐意删除这一个。

a { 
 
    display: inline-block; 
 
    overflow:visible; 
 
    color:white; /* note: use current background color */ 
 
    position:relative; 
 
} 
 

 
a::after { 
 
    color:black; /* note: use current foregound color */ 
 
    content: "more"; 
 
    position:absolute; left:0; top:0; 
 
}

<span> 
 
    <a href="#">go!</a> 
 
</span>

来源

2015-11-04 20:46:48

不错，谢谢！不漂亮，但它的作品。我用'color：transparent'替换'color：white'是唯一的区别。 – jsnelgro

不客气。我从来没有尝试过“透明”。如果可行，那就更好了！ –

嵌入式块链接在Microsoft Edge中不起作用

回答

相关问题