IE 9 复选框大小答案

【问题标题】：IE 9 Checkbox SizingIE 9 复选框大小
【发布时间】：2011-07-26 11:17:50
【问题描述】：

IE9 渲染复选框全部拉伸，所有其他浏览器保持复选框的大小，但扩展可点击的不可见区域。

是否可以在 IE9 中通过 css 禁用此行为，而不改变其他浏览器的行为（不可见区域）？

这似乎不可能有普通的复选框。即使通过选择其他兼容模式。

我有 Windows Vista SP2，64 位，IE 9.0.8112.16421。在 2 台配置大致相同的计算机上进行了测试。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>IE IS GREAT?</title>
    <style>
    body 
    {
    }

    #test_checkbox
    {
        width: 300px;
        height: 300px;
    }
    </style>
  </head>
  <body>
    <div id="test_box">
        <input type="checkbox" id="test_checkbox" />
    </div>
  </body>   
</html>

【问题讨论】：

代码示例？你的文档是什么文档模式？（参见 F12 开发者工具）
我在这里设置了一个测试页面：froyo.tv/test/index_checkbox.php
这似乎不可能有正常的复选框。即使选择其他兼容模式。
@user457015：我访问了你的测试页面，我的 IE9 显示它和其他浏览器一样：原始大小，不可见的点击区域很大。
@BoltClock 我有 Windows Vista SP2，64 位，IE 9.0.8112.16421。在 2 台配置大致相同的计算机上进行了测试。

标签： css html cross-browser internet-explorer-9

【解决方案1】：

也许您可以使用标签？这将允许您扩大可点击区域：

<label for="test_checkbox" style="display: block; width: 300px; height: 300px;">
   <input type="checkbox" id="test_checkbox" />
</label>

编辑：示例居中：

<label for="test_checkbox" style="display: block;">
   <input type="checkbox" id="test_checkbox" style="margin: 150px;" />
</label>

【讨论】：

IE9 实际上在执行它在这种情况下被指示做的事情方面做得正确......将复选框粘贴在标签内并将尺寸应用于该标签。
也许 IE9 是对的，但由于所有其他人的做法都不一样，那就错了！
使用此解决方案，复选框的高度不会垂直居中。
@user457015：有很多方法可以使元素居中。为示例编辑。