伪内容属性在每个浏览器中有所不同 [英] pseudo content properies varies in each browsers

问题描述

我使用自定义CSS来设计电台框，但现在的问题是

选中的电台圈出现在IE11 ，FF36和Chrome。下面是插图

CSS用于实现这一点如下：

  label {
 display：inline-block; 
 cursor：pointer; 
 position：relative; 
 padding-left：32px; 
} 
 
 input [type = radio] {
 display：none; 
} 
 
标签：before {
 content：; 
 display：inline-block; 
 width：23px; 
 height：22px; 
 margin-right：10px; 
 position：absolute; 
 left：0; 
 border：1px solid $ gray; 
 border-radius：50px; 
} 
 
 input [type = radio]：checked + label：before {
 content：\25CF; 
 border：1px solid $ light-blue; 
 color：$ light-blue; 
 font-size：26px; 
 text-align：center; 
 line-height：0rem; 
 padding-top：7px;任何想法，请在所有浏览器中工作相同。
 
 
 
解决方案
我改变了方法。而不是使用内容和行高，我切换如下
 标签：{
 content： 
 display：inline-block; 
 width：20px; 
 height：20px; 
 margin-right：10px; 
 position：absolute; 
 padding：1px; 
 left：0; 
 border：1px solid black; 
 border-radius：50px; 
} 
 
 input [type = radio]：checked + label：before {
 border：1px solid blue; 
 background-color：blue; 
 box-shadow：0 0 0 3px #fff inset; 
 width：20px; 
 height：20px; 
} 
  
  JS Fiddle  
 
I am using custom CSS to style radio boxes but now the problem is that

  
checked radio circle is appearing at diff positions in IE11, FF36 and Chrome. Below is the illustration


CSS used to achieve this is as below:
label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 32px;
}

input[type=radio] {
    display: none;
}

label:before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 22px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    border:1px solid $grey;
    border-radius: 50px;
}

input[type=radio]:checked + label:before {
    content: "\25CF";
    border:1px solid $light-blue;
    color: $light-blue;
    font-size: 26px;
    text-align: center;
    line-height: 0rem;
    padding-top: 7px;
}   
Any ideas please to work it same in all browsers..
解决方案
I changed the approach. Instead of using content and line height, i switched as below
label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
padding:1px;
left: 0;
border:1px solid black;
border-radius: 50px;
}

input[type=radio]:checked + label:before {
border:1px solid blue;
background-color:blue;
box-shadow: 0 0 0 3px #fff inset;
width: 20px;
height: 20px;
}
JS Fiddle  

                        
这篇关于伪内容属性在每个浏览器中有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！