:之前&& :伪元素后不显示Firefox [英] :before && :after pseudo elements not showing Firefox

问题描述

Firefox不显示:after和:before，但它们确实显示在Chrome中.

Firefox is not displaying :after and :before but they do show in Chrome.

Firefox&铬合金:

Firefox & Chrome:

直接在Firefox中查看源代码会显示CSS:

Viewing the source directly in Firefox shows the CSS is there:

这是使用:after在页面上的多个元素上发生的.

This is happening on multiple elements on the page using :after.

我之前和之后都尝试过使用.我也尝试了::和:变体.

I have tried using both before and after. I have also tried both :: and : variations.

如果我在Codepen中使用相同的CSS，它将起作用: http://codepen.io/anon/pen/XXOZWL

If I use the same CSS in codepen it works: http://codepen.io/anon/pen/XXOZWL

<input type="checkbox" class="mobile_auth" />

.mobile_auth {
    visibility: hidden;
}

.mobile_auth:after {
    background-image: url('https://lh4.googleusercontent.com/-gD_ItALdha8/AAAAAAAAAAI/AAAAAAAAAB4/eEbUyChzCJc/photo.jpg?sz=110');
    content: '';
    height: 33px;
    width: 33px;
    display: block;
    cursor: pointer;
    visibility: visible;
    margin: auto;
    position: relative;
    top: -3px;
    left: 3px;
}

.mobile_auth::after {
    background-image: url('https://lh4.googleusercontent.com/-gD_ItALdha8/AAAAAAAAAAI/AAAAAAAAAB4/eEbUyChzCJc/photo.jpg?sz=110');
    content: '';
    height: 33px;
    width: 33px;
    display: block;
    cursor: pointer;
    visibility: visible;
    margin: auto;
    position: relative;
    top: -3px;
    left: 3px;
}

.mobile_auth:checked:after {
    background-position: right;
}

您可以在以下位置实时查看页面:***.com使用用户:demo登录通过:demo然后单击配置".最新的Firefox中缺少许多按钮.

You can see the page live at: ***.com login with User: demo Pass: demo and click 'config'. Lots of buttons are missing in the latest Firefox.

这很奇怪，因为它根本不显示.这不像该元素存在，我看不到它.甚至没有显示它存在于控制台中.

It's strange because it doesn't show at all. It's not like the element is there and I can't see it. It isn't even showing that it exists in console.

推荐答案

您不能在没有内容的元素(例如<input />)上使用::after和::before.

You cannot use ::after and ::before on elements that cannot have content, such as <input />.

::after和::before的工作方式如下:

<element>
  ::before
  ***content***
  ::after
</element>
<next-element>***content***</next-element>

它们被插入到DOM节点的 content 之前和之后.由于<input />无法包含内容，因此无处可放.

They get inserted before and after the content of a DOM node. Since <input /> cannot have content, there's nowhere to put it.

现在让我们选中一个复选框:

Now let's check with a checkbox:

<input type="checkbox" />
<next-element>***content***</next-element>

在这里，没有***内容可以包围伪元素.

Here, there cannot be ***content*** to surround with pseudo elements.

这篇关于:之前&& :伪元素后不显示Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！