Проблема вертикального выравнивания с «переполнением: скрытый», «встроенный блок» и «вертикальное выравнивание»

Question

Это проблема из двух частей.Решение для Firefox ломает IE6, а решение для IE6 ломает Firefox.WebKit работает нормально.

Это демонстрирует проблему в Firefox: http://jsfiddle.net/UpZca/2/

Ссылка «Импорт отправки» немного выше, чем «Экспорт отправки», что является проблемой.IE6 отлично работает на этом этапе - выравнивание правильное.

Я знаю, что при использовании ' inline-block ' проблемы с вертикальным выравниванием можно исправить с помощью vertical-align: top, поэтому я попробовал это первым.Вы можете видеть, что это устраняет проблему в Firefox: http://jsfiddle.net/UpZca/1/

Однако, с этим изменением IE6 решил, что собирается переместить «Import Submission» до самого конца невидимого ввода файла.Посмотрите на последнюю ссылку еще раз в IE6, чтобы понять, что я имею в виду.

Кстати, jsfiddle не отображает код так же, как чистый IE6.В приведенных выше ссылках мой текст скрыт серой кнопкой Обзор из файла ввода.В чистом IE6 этого не происходит, но это все еще демонстрирует проблему позиционирования.

Итак, есть ли способ заставить этот код работать в IE6 и Firefox?

Буду признателен за любые идеи (кроме той, что не использует IE6:))

Answer 1

Я закончил тем, что использовал Javascript для программного добавления стиля vertical-align: top, если браузер не IE.

Answer 2

Краткий обзор говорит мне, что проблема может быть в том, что IE6 не поддерживает встроенный блок. Всякий раз, когда вы используете inline-block, вам также необходимо сделать следующее:

* дисплей: встроенный; * зум: встроенный;

Эти две строки эквивалентны отображению: встроенный блок для IE 6 и 7.

С этим набором вы, возможно, сможете найти решение для кросс-браузерной проблемы, добавив вертикальное выравнивание: top к первому тегу привязки или qq-upload_button.