CSS-флажок выравнивает центр, а не слева, когда я смотрю на страницу в Firefox, отлично работает в Chrome и Safari

Поэтому у меня есть форма, в которой у меня есть несколько полей ввода текста, а также поле выбора или два, а затем 3 флажка. В Chrome все выстраивается корректно и выглядит великолепно, затем я смотрю на него в Firefox, и все, кроме флажков, выстраивается в линию, вместо этого они выровнены по центру в своей области, а не влево, как в Chrome. Я попытался поставить дополнительный div вокруг него и все, но, кажется, ничто не сломает его. Любая помощь или ошибки, которые я не вижу в коде?

Флажок в форме

<div class="blueTable"> - this is for the rest of the form and table
<div class="checkbox"> - this is what I put in to override
<label>Is this a letter?</label>
<input type="checkbox" name="letter" value="YES" class="checkbox"/>

<label>Return label?</label>
<input type="checkbox" name="return" value="YES" class="checkbox"/>                 

<label>Save destination for future shipments?</label>
<input type="checkbox" name="save_destination" value="YES" class="checkbox"/>
</div></div>

Файл CSS

.blueTable input,.blueTable select{
    float:left;
    font-size:12px;
    padding:4px 2px;
    width:400px;
    margin:2px 0 20px 10px;
    text-align: left;
}
.checkbox  {
    text-align: left;
    float: left;
    vertical-align: bottom;
    position: relative;
}
Источник

2 ответа

Решение

http://jsfiddle.net/MfNdF/ это то, что вы собираетесь?

Ввод.blueTable дает вашим флажкам ширину 400 пикселей, что может вызвать проблему.

Источник

Попробуйте использовать CSS и гибридный макет таблицы. Чтобы выровнять свою страницу. Это может помочь вашей веб-странице лучше отображаться во многих браузерах, особенно в тех, которые не так CSS-совместимы, как Chrome.

Источник
Другие вопросы по тегам