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

Question

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

Он отлично работает, за исключением того, что флажок кажется повторяющимся в IE7 и IE8. Я добавил файл 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; 
} 

Answer 1

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

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

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

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