У меня есть макет, который состоит из input type = "text", за которым (в другой строке) следует a (ссылка), содержащая img. Я не могу изменить это, потому что это сгенерировано другим приложением, но я могу стилизовать элементы.
РЕДАКТИРОВАТЬ: Некоторые псевдо-HTML для тех, кто не умеет читать прозу, а также с некоторыми дополнительными деталями:
<td class="a"><!-- parent container-->
<input type="text" class="b"><!-- always here -->
<a class="c"><!-- sometimes here, sometimes not-->
<img>
</a>
<div></div><!-- sometimes has content, sometimes doesn't -->
</td>
Что произошло: если я попытался использовать встроенные блоки и при отсутствии полей, отступов или позиционирования, все браузеры, не относящиеся к webkit, смещали верх изображения сверху над входом, что позволило мне исправить вертикальное выравнивание, используя относительное позиционирование. Chrome, с другой стороны, отображается точно так же, как если бы я использовал display: inline вместо inline-block, помещая изображение ниже ввода.
Конец редактирования
Что мне нужно сделать, так это идеально совместить ввод текста и изображение рядом друг с другом (по горизонтали). Плавание влево не вариант, потому что он разбивает элементы, которые идут дальше, и я тоже не могу это контролировать.
При попытке использовать встроенный блок, который является очевидным решением для этой проблемы, я смог заставить его прекрасно работать на последних выпусках Firefox 8 и IE 9. Однако, используя те же стили, Chrome отображает как встроенный вместо встроенного блока, который разрушает все.
Это известная проблема? Кто-нибудь знает способ выровнять это расположение? Я считаю, что мне нужно быть дружелюбным к IE7, поэтому, кстати, об использовании дисплеев таблиц также не может быть и речи.
EDIT:
Спасибо за комментарии, используя несколько запутанных комбинаций селекторов, мне удалось выбрать элемент div после a> img и добавить clear: both. Это позволило мне избавиться от показа встроенного блока в пользу плавания влево, только чтобы выяснить, что он все еще не работает в Chrome (хотя он отлично работает в других браузерах), на этот раз потому, что Chrome явно не допускает пустое / скрытые контейнеры, влияющие на макет, в явном нарушении стандарта.
Я никогда не пойму, почему есть разработчики, которым нравится Chrome. Любой, кто работает над созданием сложных автоматически создаваемых макетов, должен ежедневно сталкиваться с проблемами стандартов. Я знаю, что знаю.
Подвести итог попытки исправить вертикальное выравнивание ввода текста и img с одинаковой высотой:
Первая попытка: в моей конкретной ситуации (возможно, это было вызвано вложенными контейнерами, внутри которых это было, но это определенно ошибка Chrome или Webkit) встроенный блок отображался как встроенный.
Вторая попытка: использование блоков и плавающих объектов слева привело к тому, что блок после этого отображался в той же строке, что и это расположение. Выбор этого блока был возможен, но хотя и ясен: оба поместили его ниже расположения, в котором он находился, еще раз ошибка Chrome или Webkit помешала этому работать, не изменив размер основного контейнера (переполнение: скрытый), чтобы он содержал весь размер блока. включая поля (работает в других браузерах).
Третья попытка: использование min-height: на контейнере для имитации смещения по высоте, которое должно было быть вызвано полем внутреннего блока, даже когда он скрыт. Chrome / Webkit просто проигнорировал это.
Окончательное решение используется (костыль): установить фиксированную абсолютную высоту: на основном контейнере.