由于各瀏覽器對checkbox或radio的渲染效果各不相同，為了美化和統一界面樣式，一般會選擇用js和css來自定義checkbox或radio的樣式，此時一般會隱藏原始的checkbox或radio，用自定義的icon來顯示

HTML：

<div class="checkbox"><label for="filter_1"><input type="checkbox" name="activities" id="filter_1" value="Activities" checked="checked" />Activities</label><label for="filter_2"><input type="checkbox" name="services" id="filter_2" value="Services" />Services</label> </div> <div class="radio-group"><label for="male"><input type="radio" name="gender" id="male" value="Activities" checked="checked" />Male</label><label for="female"><input type="radio" name="gender" id="female" value="Services" />Female</label> </div>

CSS:

input[type=checkbox], input[type=radio] {display: none; } input[type=checkbox], input[type=radio] {visibility: hidden; }
以上兩種寫法在IE下會有點擊label后checkbox或radio無法選中的bug, 解決此bug有以下幾種方案：

1. 用css的其他方法實現checkbox或raido的隱藏

input[type=checkbox], input[type=radio] {/*#1 將checkbox和radio放到可視區以外 */position: absolute;top: -50px;left: -50px;/*#2 或者將checkbox和radio寬度設計為0 */width: 0;/*#3 或者將checkbox和radio透明度設置為0 */-moz-opacity:0;filter:alpha(opacity:0);opacity:0; }

2. 用js解決

$("label").click(function(e){e.preventDefault(); $("#"+$(this).attr("for")).click().change(); });

總結

以上是生活随笔為你收集整理的IE下checkbox或radio隐藏bug的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。