:之前&&:在伪元素未显示 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 中查看源代码显示 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.
推荐答案
你不能在 不能有内容的元素上使用 ::after
和 ::before
,例如 或
.
You cannot use ::after
and ::before
on elements that cannot have content, such as <input />
or <img />
.
::after
和 ::before
是这样工作的:
::after
and ::before
work like this:
<element>
::before
***content***
::after
</element>
<next-element>***content***</next-element>
它们被插入在 DOM 节点的内容之前和之后.由于不能有内容,所以没地方放.
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屋!