伪元素在Internet Explorer中不工作<a>元素

在社交媒体中使用了一个juicer.io插件。伪元素在Internet Explorer中不工作<a>元素

<a>元素中有加载更多按钮。我想从载入更多到梅尔Laben更改文本，我这样做，使用::before元素，为所有的浏览器工作正常，除了IE 11

我已经创建了的jsfiddle例子来说明问题。

问题是IE 11不能读取伪元素，可能只是为了。

我试过用:before替代::before，但没有工作。

注意：这<a>是动态生成的，我无法换行。

JSFIDDLE：https://jsfiddle.net/uy4xewpr/ 你可以在IE里面运行这个，你会看到空的页面，但是在Chrome里面......工作正常。

HTML：

<a href="#">READ MORE</a>

CSS：

a{ 
    visibility: hidden; 
    color: #000; 
    font-size: 17px; 
    display: flex; 
    text-transform: none; 
} 
a::before{ 
    display: inline-block; 
    visibility: visible; 
    content: "Mehr Laden"; 
    padding-left: 32px; 
    padding-top: 3px; 
    min-width: 124px; 
}

来源

2017-09-06 ml92

我真的不认为IE11的行为是奇数。实际上这应该是预期的。伪元素是父元素的子元素，因此将 a设置为具有可见性 hidden，然后将伪内容的可见性设置为 visible应该不起作用。这实际上是错误的，我认为能见度应该像opacity那样行为，您不能在具有不同不透明度的父母的孩子中取消设置不透明度。这可能是IE11中的一个错误，不像其他浏览器那样不好实现，就像我想的那样。

为了解决这个问题移除可见性和对a使用font-size: 0然后设置font-size为所需的值伪元件上

a { 
    color: #000; 
    font-size: 0; 
    display: flex; 
    text-transform: none; 
} 
a::before { 
    display: inline-block; 
    font-size: 17px; 
    content: "Mehr Laden"; 
    padding-left: 32px; 
    padding-top: 3px; 
    min-width: 124px; 
}

唯一的缺点是，它不会在Android 2工作是一个很老的版本，你可能不关心

来源

2017-09-06 11:42:12

其实， 'visibility'属性可以让你用'hidden'设置父元素，用'visible'设置子元素 - 所以我认为这种行为很奇怪https://codepen.io/danield770/pen/WEBrvj – Danield

@我刚刚发现了这个。我从来没有真正知道它，我认为它表现得像“不透明”。 –

您可以在这里使用两个技巧：

font-size: 0

a { 
 
    font-size: 0; 
 
    color: #000; 
 
    font-size: 0; 
 
    display: flex; 
 
    text-transform: none; 
 
} 
 

 
a::before { 
 
    font-size: 17px; 
 
    display: inline-block; 
 
    content: "Mehr Laden"; 
 
    padding-left: 32px; 
 
    padding-top: 3px; 
 
    min-width: 124px; 
 
}

<a href="#">READ MORE</a>

color: transparent

a { 
 
    font-size: 17px; 
 
    color: transparent; 
 
    display: flex; 
 
    text-transform: none; 
 
} 
 

 
a::before { 
 
    color: #000; 
 
    display: inline-block; 
 
    content: "Mehr Laden"; 
 
    padding-left: 32px; 
 
    padding-top: 3px; 
 
    min-width: 124px; 
 
}

<a href="#">READ MORE</a>

来源

2017-09-06 11:45:38 dippas

伪元素在Internet Explorer中不工作<a>元素

回答

相关问题