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

概述我正在开发一个需要符合Section 508标准的网站,所以我认为增加复选框的大小对任何仍有一些视力的视力障碍者都有用.看看Chrome 15的这个屏幕截图(与Chrome 16相比)： 这是同样的css恰好是： input[type="checkbox"] { width: 30px; height: 30px;} 如您所见,宽度和高度的解释截然不同.任何人都知道如何使用这两种浏览器？ 我正在开发一个需要符合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"  ID="check_1" /><label for="check_1"><span >✓</span> Text describing checkBox #1</label>

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

总结

以上是内存溢出为你收集整理的html – 新版浏览器的复选框宽度/高度不变全部内容，希望文章能够帮你解决html – 新版浏览器的复选框宽度/高度不变所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。