html – 新版浏览器的复选框宽度/高度不变

2023年2月28日 203次阅读

我正在开发一个需要符合Section 508标准的网站,所以我认为增加复选框的大小对任何仍有一些视力的视力障碍者都有用.看看Chrome 15的这个屏幕截图(与Chrome 16相比)：

这是同样的css恰好是：

input[type="checkbox"] {
  width: 30px;
  height: 30px;
}

如您所见,宽度和高度的解释截然不同.任何人都知道如何使用这两种浏览器？ (IE9也在右边做同样的事情).

最佳答案 确实没有任何
cross browser solution(这是一篇旧文章,但仍然很好且相关)使用实际的复选框.你可以在CSS3中使用技巧.我使用的那个不是非常浏览器友好(需要更新的浏览器),但还有其他方式更加跨浏览器友好,但仍然不是100％.我怀疑你会找到任何支持IE6的东西,例如.

像这样的东西：

input.checkbox { display: none }
input.checkbox + label > span.checkbox-span { display: inline-block; color: #FFF; border: 1px solid #000; width: 30px; line-height: 30px; font-size: 24px; text-align: center }
input.checkbox:checked + label > span.checkbox-span { color: #000 }

<input type="checkbox" class="checkbox" id="check_1" />
<label for="check_1"><span class="checkbox-span">✓</span> Text describing checkbox #1</label>

这是一个非常基本的例子. See the jsFiddle.

点赞