检查互联网浏览器中的伪元素 [英] Inspecting pseudo-elements in internet explorer

问题描述

我有以下伪元素：

  input [type = radio] .selected :: before 
  

在互联网浏览器中伪元素根本不显示，所以我决定看看。我在检查器中找到选择器（在检查器中的选择器将是一个伟大的儿童书！）但所有属性都被删除。 （即覆盖/无效）。大多数属性不会被其他属性覆盖。这是IE中的默认行为，或者这意味着样式根本不工作，更重要的是，为什么他们不显示？下面是完整的css：

  input [type = radio] {
 visibility： 
 cursor：pointer; 
 width：22px; 
 height：22px; 
} 
 
 input [type = radio] :: before {
 content：; 
 display：inline-block; 
 visibility：visible; 
 width：16px; 
 height：16px; 
 margin-bottom：0; 
 border：1px solid #ddd; 
 -moz-border-radius：8px; 
 border-radius：8px; 
 font-size：41px; 
 line-height：18px; 
 padding-left：1px; 
 color：＃a3a3a3; 
} 
  

解决方案

W3：

使用
：before和：after伪元素指定生成内容的样式和位置。如他们的名字所示，
：before和：after伪元素指定元素的文档树内容之前和之后的内容
的位置。 'content'
属性与这些伪元素一起指定了插入的
。

换句话说，伪元素只能用在容器元素上。这就是为什么它不能在你的输入元素上工作。

I have the following pseudo-element:

input[type=radio].selected::before

In internet explorer the pseudo-elemen doesn't show at all, so I decided to take a look. I find the selector in the inspector (The selector in the inspector would be a great childrens-book!) But all properties are striked. (ie overwritten/not valid). Most attributes are not overridden by other attributes. Is this default behaviour in IE or does this mean that the styling doesn't work at all and more importantly, why arent they showing? Below is the full css:

input[type=radio]{
    visibility:hidden;  
    cursor: pointer;
    width: 22px;
    height: 22px;
}

input[type=radio]::before{
    content: "";
    display: inline-block;
    visibility: visible;
    width: 16px;
    height: 16px;
    margin-bottom: 0;
    border: 1px solid #ddd;
    -moz-border-radius:8px;
    border-radius:8px;
    font-size: 41px;
    line-height: 18px;
    padding-left: 1px;
    color: #a3a3a3;
}

解决方案

W3:

The :before and :after pseudo-elements

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

In other words, pseudo-elements can only be used on container elements. Thats why it won't work on your input element.

这篇关于检查互联网浏览器中的伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！