Пользовательский флажок повторяется в ie7 и ie8

Question

Пользовательский флажок повторяется в ie7 и ie8

0

Пользовательский флажок формы, которую я buidling, кажется, повторяется в IE7. Я использую "custom-form-elements.js" из http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Он отлично работает, но флажок кажется повторяющимся в IE7 и IE8. Я добавил файл javascript, как указано там. Прикрепленный файл моего файла с галочкой

В файле javascript я изменил ширину/высоту, как показано ниже.

var checkboxHeight = "24";

И в моем css, как показано ниже

.checkbox {
    width: 25px;
    height: 24px;
    padding: 0 5px 0 0;
    background: url(../images/checkbox.png) no-repeat;
    display: block;
    clear: left;
    float: left;
    margin-left: 90px;
    margin-right: 20px;
}

Hello Universe 18 сен. 2013, в 05:31

Источник

Теги:

javascript

jquery

html

css

internet-explorer

1 ответ

Ещё вопросы

Oiva Eskola · Accepted Answer · 2013-09-18T05-20-00.000Z

Проблема заключается в том, что CSS из bootstrap.min.css переопределяет ваш CSS для заполнения элемента. У Bootstrap.min.css есть правило:

 .form-horizontal .checkbox {
     padding-top: 7px;
     ...
 }

Это отменяет ваше правило заполнения, так что на самом деле элемент имеет верхнюю прописку 7px. Это увеличивает высоту элемента на IE7, и вы видите фоновое изображение, которое распространяется вниз.

Исправление может сделать ваше правило CSS более конкретным, например .form-horizontal.ticks.checkbox {...} или добавление !important для вашего дополнения.