Флажки не имеют «padding» на IE11

Мне не удается применить «padding» к checkbox на IE11, так что они будут вести себя так же, как и в IE10.Флажки не имеют «padding» на IE11

На 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, сохраняя собственный вид флажка (без изображения)?

ПРИМЕЧАНИЕ: пожалуйста, пожалуйста, «почему вы пытаетесь это сделать, это плохо для удобства пользователя и т. Д.». Комментарии. Рассмотрим его как технический вызов без других целей, кроме удовлетворения ее решения :)

источник

2013-11-26 Gyum Fox

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 top, 3px bottom)

Я думаю, что лучше всего вы можете использовать vertical-align, чтобы сделать верхнюю или нижнюю границу или флажок доступным;

источник

2013-12-18 22:29:33 KTU

Это интересно, спасибо за него. Тем не менее, вопрос остается открытым в надежде на полное решение CSS. –

ИМХО:
IE 10 прямоугольник флажок воспринимается как содержание и «заполнения» показал, как расстояние из прямоугольника.
IE 11 как контент, воспринимаемый внутри прямоугольника, и «отступы» просто игнорируются.
Браузер Google 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).

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

Я знаю, что мой английский не так хорошо, но я надеюсь, что вы понял! -)

источник

2014-02-27 13:28:21 Anton

я встретил ту же проблему, в последнее время, и решен путем обертывания вокруг < флажка > от < диапазона > (JQuery требуется)

Затем переместите класс < флажка > до < пролета >, и определил некоторые специальные стили для 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(); 
    }); 
}

источник

2015-04-25 03:50:18 gokaka

Флажки не имеют «padding» на IE11

ответ

Смежные вопросы