IE 删除伪元素 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27875232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE crossing out pseudo element CSS?
提问by Kairowa
I've been trying to get a few pseudo elements to work on IE, but it just doesn't let me.
我一直试图让一些伪元素在 IE 上工作，但它只是不让我。
It crosses out the CSS and acts like it's not there, which kinda aggrevates me.
它划掉了 CSS 并表现得好像它不存在一样，这让我有点生气。
Would anyone know what I'm doing wrong?
有谁知道我做错了什么？
.newbutton {
border-radius: 50%;
width: 74px;
height: 74px;
position: relative;
background-color: black;
margin: 60px 0px 25px 17px;
overflow: visible;
}
.newbutton:before {
content: "f";
width: 80px;
height: 80px;
position: absolute;
border-radius: 50%;
z-index: -1;
top: 37px;
left: 37px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation-name: fadecolor;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-name: fadecolor;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.newbutton:after {
content: "";
width: 80px;
height: 80px;
position: absolute;
border-radius: 50%;
z-index: -2;
top: -3px;
left: -3px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}<div class="starttour">
<div class="newbutton headerbutton">
<span class="iconhead icon-02-arrow-icon"></span>
</div>
<p>START TOUR</p>
</div>Screenshot of what happens:
发生了什么的截图：
采纳答案by Sampson
This is a known issue, but the styles are in fact being applied. The developer tools thinks the pseudo-element styles are being overridden by the parent-elements corresponding styles. This is easily demonstrated by inspecting the Computedstyle of the parent-element and looking at (what the F12 tools believe to be) competing styles:
这是一个已知问题，但实际上正在应用这些样式。开发人员工具认为伪元素样式被父元素对应的样式覆盖。通过检查父元素的Computed样式并查看（F12 工具认为是什么）竞争样式，可以轻松证明这一点：
Again, however, these styles are in fact being applied to the correct elements - regardless what the developer tools believe or suggest. You can confirm thisby running over the parent-element and the two pseudo-elements and logging their computed height:
然而，这些样式实际上被应用于正确的元素——无论开发人员工具相信或建议什么。您可以通过遍历父元素和两个伪元素并记录它们的计算高度来确认这一点：
(function () {
var el = document.querySelector( ".newbutton" );
[ "", "::before", "::after" ].forEach(function ( e ) {
// Output: 74px, 80px, 80px
console.log( window.getComputedStyle( el, e ).height );
});
}());
I'll check to see if we already have an internal issue tracking this bug, and add this question to it. Generally speaking, we try to give issues like this the amount of attention proportional to the amount of grief the issue is causing in the real world. So having your question as a new addition on the ticket may help us move a fix forward :)
我会检查我们是否已经有跟踪此错误的内部问题，并将此问题添加到其中。一般而言，我们试图给予此类问题的关注量与该问题在现实世界中引起的悲伤程度成正比。因此，将您的问题作为新添加的问题可能有助于我们向前推进修复：)
回答by Freddie
I had this exact same issue! You must give your :beforeand :afterpseudo elements a displayproperty.
我有这个完全相同的问题！你必须给你的:before和:after伪元素一个display属性。
Add the following to the :beforeand :after.
将以下内容添加到:beforeand 中:after。
display: block;
This should fix your issue. :)
这应该可以解决您的问题。:)
回答by Edmund Park
To add onto the answer above. I tried display: block but my issue was that the background image was coming out warped. Instead I used below:
补充上面的答案。我试过 display: block 但我的问题是背景图像扭曲了。相反，我在下面使用：
display: inline-block;
This fixed my issue with warped images within my :before :after
这解决了我的 :before :after 中扭曲图像的问题
回答by Christian
As I had the same problem with Material Font and IE11 and could not solve it with the above solutions, I looked further:
由于我在 Material Font 和 IE11 上遇到了同样的问题，并且无法通过上述解决方案解决，我进一步查看：
The documentation of the material design icons mentions to use
材料设计图标的文档提到使用
<i class="material-icons"></i>
for browsers not supporting ligatures. The codepoints for each item are listed here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
对于不支持连字的浏览器。这里列出了每个项目的代码点：https: //github.com/google/material-design-icons/blob/master/iconfont/codepoints
The problem with :after elements is that HTML in the content-Tag is rendered as plain text showing the &#x.. so you have to use the \ escape as following:
:after 元素的问题在于content-Tag中的 HTML呈现为显示 &#x.. 的纯文本，因此您必须使用 \ 转义如下：
content: "\e5c5";
回答by pjain
Check out this link "http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field", as quoted from this link
查看此链接“ http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field”，引用自此链接
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
:after 和 :before 在 Internet Explorer 7 及更低版本中的任何元素上均不受支持。
它也不意味着用于替换元素，例如表单元素（输入）和图像元素。
换句话说，纯 CSS 是不可能的。
/* * The trick is here: * this selector says "take the first dom element after * the input text (+) and set its before content to the * value (:before). */
/* * 技巧在这里：* 这个选择器说“在输入文本 (+) 之后获取第一个 dom 元素，并将其之前的内容设置为 * 值 (:before)。*/
input#myTextField + *:before {
content: "";
}
