Checkboxes have no "padding" on IE11

Question

I cannot manage to apply "padding" to checkboxes on IE11, so that they behave the same as on IE10.

On IE10, the computed style for checkboxes was:

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

On IE11, it is now:

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

Although the checkboxes have the same size on both browsers, their behaviour has slightly changed. On IE10, the 3 pixels padding was causing the checkbox to "hover" when passing the mouse 3 pixels around the edges of the box. This is no longer the case on IE11, reducing the clickable area by that many pixels on each side.

I have tried applying the same style as on IE10 to the checkboxes, without any success (see http://jsfiddle.net/LSjb4/). The padding seems to be ignored. I've also tried playing with the width and height (as you would do on Chrome for instance), but this is causing the box to visually stretch.

Can anyone think of a pure CSS solution to get the same behaviour as IE10, retaining the native look of the checkbox (no image please)?

NOTE: please spare the "why are you trying to do that, it's bad for user experience etc." comments. Consider it as a technical challenge with no other purpose than the satisfaction to solve it :)

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

This create a 3px padding area around the label box that allow you to click checkbox without hover entirely into the checkbox.

But this leads another problem that there is a small margin where IE11 has default margin preset. (I am guessing 1px top, 3px bottom)

I think the best you can do is using vertical-align to make either top or bottom border or checkbox clickable;

Answer 2

IMHO:
IE 10 rectangle checkbox perceived as content and 'padding' showed as distance out rectangle.
IE 11 as content perceived contents inside the rectangle and 'padding' just ignor.
Google Chrome browser also behives as IE 11 and ignore padding for checkbox.

For the same display your page in IE10 and in IE11 you must don't use padding for checkbox.
Simple solution is force IE11 simulate IE10 with through use

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

P.S.
I also was unpleasantly surprised when discover that different behaviour in IE11 and IE10.
I am using Bootstrap.css which inside had classes .checkbox-inline and .checkbox. If use these css classes, the boxes moved down relatively to label(.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;
}

For the same display in IE10 and IE11 I rewrite this classes (of course in other css file)

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

I know that my english isn't so good, but i hope you are understood!-)