IE 9复选框大小调整

Question

IE 9复选框大小调整

csshtmlcross-browserinternet-explorer-9

6

IE9会拉伸复选框，而其他浏览器则保持复选框的大小但扩展了一个可点击的不可见区域。

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

似乎无法拥有正常的复选框。即使选择其他兼容模式也不行。

我使用的是Windows Vista SP2，64位，IE 9.0.8112.16421。在两台几乎相同配置的计算机上进行了测试。

enter image description here

<!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>

- user457015

1

代码示例？你的文档处于哪个文档模式？（请查看F12开发者工具） - EricLaw

1

我已经在这里设置了一个测试页面：http://froyo.tv/test/index_checkbox.php - user457015

1

似乎无法使用普通复选框，即使选择其他兼容模式也不行。 - user457015

1

@user457015：我访问了你的测试页面，我的IE9显示与其他浏览器相同：原始大小和大型不可见点击区域。 - BoltClock

1

@BoltClock 我使用的是Windows Vista SP2，64位，IE 9.0.8112.16421。在两台配置相似的计算机上进行了测试。 - user457015

显示剩余10条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RoToRa · Accepted Answer

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

<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>