Question

我无法将“填充”应用于IE11上的复选框，因此它们的行为与IE10上的相同。

在IE10上，复选框的计算样式为：

width: 13px;
height: 13px;
padding: 3px;
margin: 0;

在IE11上，现在是：

width: 13px;
height: 13px;
padding: 0;
margin: 3px;

虽然两个浏览器的复选框大小相同，但它们的行为略有改变。在IE10上，3像素填充导致复选框在鼠标左右移动3个像素时“悬停”。在IE11上不再是这种情况，每侧的可点击区域减少了许多像素。

我尝试将与IE10相同的样式应用于复选框，但没有任何成功（请参阅http://jsfiddle.net/LSjb4/）。填充似乎被忽略了。我也试过玩宽度和高度（就像在Chrome上一样），但这会导致盒子在视觉上伸展。

任何人都可以想到一个纯CSS解决方案来获得与IE10相同的行为，保留复选框的原生外观（请不要图像）？

注意：请注意“为什么要尝试这样做，这对用户体验等有害”评论。将其视为技术挑战，没有其他目的，而不是满足于解决它：）

Answer 1

http://jsfiddle.net/8xmpw/

HTML

<label for="ie11" class="ie11">
    <input type="checkbox" id="ie11" />
</label>

CSS

.ie11 {
    padding: 3px;
}
.input[type=checkbox] {
    vertical-align:bottom;
}

这会在标签框周围创建一个3px填充区域，允许您单击复选框而不会完全悬停在复选框中。

但是这导致另一个问题，即IE11具有默认边距预设的小幅度。（我猜1px顶部，3px底部）

我认为您可以做的最好的事情是使用vertical-align制作顶部或底部边框或复选框可点击;

Answer 2

IMHO：
IE 10矩形复选框被视为内容，“填充”显示为距离矩形 IE 11作为内容感知矩形内部的内容和'填充'只是忽略。
谷歌Chrome浏览器也可以作为IE 11，并忽略填充复选框。

要在IE10和IE11中显示相同的页面，您必须不要使用填充作为复选框。
简单的解决方案是强制IE11通过使用

模拟IE10

<meta http-equiv="X-UA-Compatible" content="IE=10">

P.S。的
当发现IE11和IE10中的不同行为时，我也感到非常惊讶我正在使用Bootstrap.css，里面有类 .checkbox-inline 和 .checkbox 。如果使用这些css类，则框相对于标签（.control-label）向下移动。

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}

对于IE10和IE11中的相同显示，我重写了这个类（当然在其他css文件中）

.form-horizontal .checkbox,
.form-horizontal .checkbox-inline {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}

我知道我的英语不太好，但我希望你能被理解！ - ）

Answer 3

我最近遇到了同样的问题，并通过环绕＆lt; checkbox＆gt;来解决。由＆lt; span＆gt; （需要jQuery）

然后移动＆lt; checkbox＆gt;类。直到＆lt; span＆gt;，并为ie11

定义了一些特殊样式

// IE11 or above
if(!!(navigator.userAgent.match(/Trident/) && ! navigator.userAgent.match(/MSIE/))){
    $(function(){
        $("input[type=checkbox]").wrap(function(){
            return "<span class='" + $(this).attr("class") + " ie11'>";
        });
        $("input[type=checkbox]").removeClass();
    });
}

复选框在IE11上没有“填充”

3 个答案: