IE划掉伪元素CSS？

Posted 2023-03-06

【中文标题】IE划掉伪元素CSS？

【英文标题】：IE crossing out pseudo element CSS?

【发布时间】：2015-03-08 15:21:31

【问题描述】：

我一直在尝试让一些伪元素在 IE 上工作，但它就是不让我这样做。

它划掉了 CSS，表现得好像它不存在一样，这让我有点生气。

有人知道我做错了什么吗？

.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>

发生情况的屏幕截图：

【问题讨论】：

搞笑的是，它并没有划掉-webkit- 位。

噗，告诉我。我敢打赌，它是故意拖钓我的。愚蠢的 IE。

不管怎样，你测试的是什么版本的IE，它告诉你什么关于文档模式/浏览器模式的信息？我从来没有真正理解为什么 IE 选择这样做，但希望这些事情能提供一些线索。

IE11。我在文档模式下尝试了IE9、IE10和Edge，但没有成功。

【参考方案1】：

这是一个已知问题，但实际上正在应用这些样式。开发者工具认为伪元素样式被父元素对应的样式覆盖。这很容易通过检查父元素的 Computed 样式并查看（F12 工具认为的）竞争样式来证明：

然而，这些样式实际上已应用于正确的元素 - 无论开发人员工具相信或建议什么。 You can confirm this 通过遍历父元素和两个伪元素并记录它们的计算高度：

(function () 

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) 
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    );

());

我会检查我们是否已经有跟踪此错误的内部问题，并将此问题添加到其中。一般而言，我们试图给予此类问题的关注程度与该问题在现实世界中造成的悲伤程度成正比。因此，将您的问题作为票证上的新增内容可能会帮助我们推进解决方案:)

【讨论】：

我在 IE11 中看到了同样的问题，但没有应用伪元素样式。即使在“计算”面板中关闭假定的父母覆盖，也不会应用伪元素样式。整个块中唯一被渲染的部分是内容规则，其他的都被忽略了。

进入 Computed 我能够点击一个属性并发现它被覆盖了。我覆盖了背景，并且插入符号图标没有显示用于排序（数据表）。谢谢！

我的代码中的所有 ::after 伪样式在 IE11 和 Edge 中都被划掉了。确实应用了所有规则:-) 除了一个之外，所有规则：cursor: pointer。这是一个移动汉堡菜单，所以我可以放开指针（因为我不希望在那个屏幕尺寸上悬停太多）。

@Michael_B 这是一个已知的错误；我相信伪元素样式认为它们与父元素样式冲突。所以任何在伪元素上设置的东西，也就是在父元素上设置的东西，都会被划掉。

嗨，解决方案是什么？我正在使用 IE11 11.321.14393.0 并且 IE 覆盖了我的伪类...

【参考方案2】：

我遇到了同样的问题！你必须给你的:before 和:after 伪元素一个display 属性。

将以下内容添加到:before 和:after。

display: block; 

这应该可以解决您的问题。 :)

【讨论】：

分享您当前设置的属性。我猜你要么没有设置 content 属性，要么你试图在不允许伪元素的元素上设置伪元素

这为我解决了问题！开发工具中的属性仍然被划掉，但元素现在可以正常显示。

非常感谢！首先我这样做了，它没有帮助，但后来我注意到我没有设置左属性。所以，显示：块；左：0；治愈了 IE！

又是一天，又是一个 IE11 技巧！等等……已经是 2020 年了……

我尝试将 display: block; 添加到伪元素 :after ，但结果没有任何帮助！

【参考方案3】：

添加到上面的答案。我试过 display: block 但我的问题是背景图像变形了。相反，我在下面使用：

display: inline-block;

这解决了我的 :before :after 中图像变形的问题

【参考方案4】：

由于我在使用 Material Font 和 IE11 时遇到了同样的问题，并且无法通过上述解决方案解决，所以我进一步查看：

材料设计图标的文档提到使用

<i class="material-icons">&#xE87C;</i>

适用于不支持连字的浏览器。此处列出了每个项目的代码点：https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

:after 元素的问题是content-Tag 中的 html 被呈现为显示 .. 的纯文本，因此您必须使用 \ 转义符，如下所示：

content:  "\e5c5";

【讨论】：

使用 unicode 字符解决了我的问题。但绝对值得注意的是，伪元素样式实际上在 IE11 中应用，即使它们看起来像是被划掉了。接受的答案以及这个答案帮助我看到了这一点。

【参考方案5】：

查看此链接“http://***.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field”，引用自此链接

:after 和 :before 在 Internet Explorer 7 及更低版本中不受任何元素的支持。

它也不适用于替换元素，例如表单元素（输入）和图像元素。

换句话说，纯 CSS 是不可能的。

/* * 诀窍在这里： * 这个选择器说“取第一个 dom 元素之后 * 输入文本 (+) 并将其之前的内容设置为 * 值（：之前）。 */

input#myTextField + *:before 
       content: "?";
     

【讨论】：

可以使用 jQuery。

【参考方案6】：

我遇到了同样的问题！你必须给你的伪元素的父元素一个overflow : visible 属性。