Блог

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

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

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

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

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

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

Итак, есть ли у меня какой-либо способ заставить этот код работать в IE6 и Firefox?

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

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

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

*отображение: встроенное; *масштабирование: встроенное;

Эти две строки эквивалентны display: inline-block для IE 6 и 7.

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