Странный вертикальный разрыв в IE6 и IE7 в моей форме при использовании CSS для макета

Благодаря Джонатану Аменду CSS теперь исправлен в iebug.html ниже.

Трудно действительно объяснить эту проблему, не глядя на нее в IE6 или IE7, но в любом случае, если вы посмотрите на следующие страницы в IE6 и 7, вы увидите рядом с «пришлите мне брошюру» и «Мне нужна дополнительная информация». on (отметьте один или несколько флажков)», флажки и их метки по какой-то причине были таинственным образом сдвинуты или опущены:

http://sonic.huntinternet.com/iebug.html

Я пытался изменить поля и отступы для всех своих элементов на 0, но это не повлияло на IE6 и 7, то есть я думаю, что это какая-то ошибка ... однако у меня действительно недостаточно опыта, чтобы знать, какую ошибку даже смотреть так что любой указатель был бы хорош.

К вашему сведению, я использовал руководство с веб-сайта sitepoint, в котором предлагалось использовать вложенные списки, но на самом деле это не должно иметь никакого значения. И xhtml, и css действительны в соответствии с валидатором w3c.

Спасибо за вашу помощь! Джон.


padding css margin internet-explorer-7 internet-explorer-6
person John Hunt    schedule 27.01.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Добавить *display: встроенный блок; к вашей форме .enquiry ol li. Это распространенная ошибка, связанная с тем, как IE 6/7 очищает элементы списка (блоковые элементы по умолчанию) на новые строки.

person Jonathan Amend    schedule 27.01.2011
comment
Вы действительно мастер css ;) Спасибо! - person John Hunt; 28.01.2011
comment
Допустимый способ: .enquiry-form ol li { display: inline-block; } .enquiry-form ol li { display: list-item; } - person reisio; 28.01.2011

arrow_upward
0
arrow_downward

Для этого он вытягивается вниз, потому что ваша плавающая метка имеет длину в две строки, поэтому OL выравнивает свое верхнее положение по верху второй строки.

Решение, которое приходит на ум, состоит в том, чтобы сделать OL плавающим влево. Это, конечно, потребует, чтобы каждый LI имел стили clearfix (стили для clearfix можно найти здесь: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-content-children/).

person RussellUresti    schedule 27.01.2011