对于较新的浏览器，复选框宽度/高度不会更改

Question

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

这恰好是css：

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

正如您所看到的，宽度和高度的解释截然不同。任何人都知道如何使用这两种浏览器？ （IE9也在右边做同样的事情）。

Answer 1

使用实际的复选框确实没有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.