CSS3自定義複選框 - 跨瀏覽器差異

Question

我最近一直在研究一些自定義複選框，並發現它是一個挑戰。但是，我非常接近完成它們，並且在Chrome中進行了很多測試，我試圖讓它們變得完美。

然後我檢查了其他瀏覽器，並且在我的狀態渲染後有一些明顯的區別。你如何解決這些差異？它甚至有可能嗎？或者我只需要使用圖像？

JSFIDDLE

HTML：

<div class="fb-checkbox"> 
<br> 
<br> 
<input id="item21_0_checkbox" name="Project_type[]" type="checkbox" data-hint="" value="Conference" /><label for="item21_0_checkbox" id="item21_0_label" ><span id="item21_0_span" class="fb-fieldlabel">Conference</span></label> 
     <input id="item21_1_checkbox" name="Project_type[]" type="checkbox" value="Incentive campaign" /><label for="item21_1_checkbox" id="item21_1_label" ><span id="item21_1_span" class="fb-fieldlabel">Incentive campaign</span></label> 
     <input id="item21_2_checkbox" name="Project_type[]" type="checkbox" value="Incentive travel" /><label for="item21_2_checkbox" id="item21_2_label" ><span id="item21_2_span" class="fb-fieldlabel">Incentive travel</span></label> 
     <input id="item21_3_checkbox" name="Project_type[]" type="checkbox" value="Awards dinner" /><label for="item21_3_checkbox" id="item21_3_label" ><span id="item21_3_span" class="fb-fieldlabel">Awards dinner</span></label> 
     <input id="item21_4_checkbox" name="Project_type[]" type="checkbox" value="Product launch" /><label for="item21_4_checkbox" id="item21_4_label" ><span id="item21_4_span" class="fb-fieldlabel">Product launch</span></label> 
     <input id="item21_5_checkbox" name="Project_type[]" type="checkbox" value="Hospitality" /><label for="item21_5_checkbox" id="item21_5_label" ><span id="item21_5_span" class="fb-fieldlabel">Hospitality</span></label> 
    <input id="item21_6_checkbox" name="Project_type[]" type="checkbox" value="Comms and marketing" /><label for="item21_6_checkbox" id="item21_6_label" ><span id="item21_6_span" class="fb-fieldlabel">Comms and marketing</span></label> 
     <input id="item21_7_checkbox" name="Project_type[]" type="checkbox" value="Reward &amp; Recoginition scheme" /><label for="item21_7_checkbox" id="item21_7_label" ><span id="item21_7_span" class="fb-fieldlabel">Reward &amp; Recoginition scheme</span></label> 
     <input id="item21_8_checkbox" name="Project_type[]" type="checkbox" value="Design brief" /><label for="item21_8_checkbox" id="item21_8_label"><span id="item21_8_span" class="fb-fieldlabel">Design brief</span></label> 
    </div> 

CSS：

input[type="checkbox"] { 
display: none!important; 
} 

/*------ 1st checkboxes ----*/ 

input[type="checkbox"]:not(:checked) + label span, 
input[type="checkbox"]:checked + label span { 
position: relative; 
cursor: pointer; 
} 


input[type="checkbox"]:not(:checked) + label span:before, 
input[type="checkbox"]:checked + label span:before { 
content: ''; 
position: absolute; 
right: 10px; 
width: 15px; height: 15px; 
border: 1px solid #a5a5b1; 
background: none; 
border-radius: 3px; 
-webkit-box-shadow: inset 0px 0px 8px 0px rgba(50, 50, 50, 0.13); 
-moz-box-shadow: inset 0px 0px 8px 0px rgba(50, 50, 50, 0.13); 
box-shadow:   inset 0px 0px 8px 0px rgba(50, 50, 50, 0.13); 
margin: 0; 
padding: 0; 
} 

input[type="checkbox"]:not(:checked) + label span:after, 
input[type="checkbox"]:checked + label span:after { 
content: '★'; 
position: absolute; 
width: 15px; height: 15px; 
top: -1px; 
right: 10px; 
font-size: 1.2em; 
border-radius: 3px; 
color: #ffc20e; 
transition: all .5s; 
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); 
margin: 0; 
padding: 0; 
font-family: Arial, sans-serif; 
border: 1px solid #000000; 
text-align: center; 
vertical-align: middle; 
} 

input[type="checkbox"]:not(:checked) + label span:after { 
opacity: 0; 
transform: scale(0); 
} 

input[type="checkbox"]:checked + label span:after { 
opacity: 1; 
transform: scale(1); 
} 

input[type="checkbox"]:disabled:not(:checked) + label span:before, 
input[type="checkbox"]:disabled:checked + label span:before { 
box-shadow: none; 
border-color: #bbb; 
background-color: #ddd; 
} 

input[type="checkbox"]:disabled:checked + label span:after { 
color: #999; 
} 

input[type="checkbox"]:disabled + label span { 
color: #aaa; 
} 

/* accessibility */ 
input[type="checkbox"]:checked:focus + label span:before, 
input[type="checkbox"]:not(:checked):focus + label span:before { 
border: 1px dotted blue; 
} 

如果單擊框爲自己選中的狀態，並在不同的瀏覽器，你會發現定位是關連星星的大小略有不同...

ED IT：我知道我的示例沒有顯示它們完全對齊，只是對它們的位置有所不同而感興趣

Answer 1

嘗試添加一個line-height對應元素高度，用於顯示星號的:after元素，

input[type="checkbox"]:not(:checked) + label span:after, 
input[type="checkbox"]:checked + label span:after { 
    /* … */ 
    top: 0; /* modified */ 
    line-height: 13px; 
} 

因此，它在Firefox和Opera中看起來還不錯。 http://jsfiddle.net/mBWm3/1/