Почему не работает display inline block
Перейти к содержимому

Почему не работает display inline block

  • автор:

Решение проблемы с display: inline-block в IE7

Чтобы обеспечить поддержку inline-block в IE7, используйте специфический для IE7 трюк: задайте значения *display: inline и *zoom: 1 в стилях HTML-элемента. Эти свойства применяются в IE7 для имитации поведения inline-block .

Разбор трудностей с IE7

Этот хак для IE7 использует уникальное внутреннее свойство hasLayout . Если у элемента настроено hasLayout , он ведёт себя подобно inline-block . Комбинация атрибутов *display: inline и *zoom:1 фактически активирует hasLayout .

IE7, капризный недруг верстки

IE7 можно сравнить c помойкой веб-разработки. У него есть свои уникальные особенности, в частности, хаки со звёздочкой * , которые заставляют браузер вести себя нестандартно. Код, содержащий эти хаки, не пройдёт валидацию CSS. Для улучшения качества кода используйте условные комментарии, чтобы загружать специфические стили для IE7.

Стили специально для IE7 с использованием условных комментариев: html

Два пути: Прогрессивное улучшение и Гуманное ухудшение

С одной стороны, можно использовать Прогрессивное улучшение, которое предлагает базовую функциональность и наращивает улучшения для современных браузеров. С другой стороны – поддержка Гуманного ухудшения для IE7, что гарантирует работоспособность и приемлемое отображение даже без поддержки продвинутых стилей.

Визуализация

Вот как IE7 реагирует на display: inline-block :

Не работает display:inline-block

Не работает display:inline-block , блоки находятся в разных частях страницы, налазят на другие элементы. Как это исправить?

#text1 < color: green; text-align: center; font-size: 25px; font-family: Calibri; font-weight: lighter; >#borov < width: 384px; height: 384px; position: relative; left: 175px; border: 1px solid black; >#borovtupo < width: 768px; height: 768px; margin: 0px auto 250px auto; >.button
 

Биография Жмышенка Валерия Альбертовича

Пажилой боров в свои 54 ГГГГода

тест

тест

Р ешение inline-block

Одним из самых интересных свойств в CSS является inline-block . Возможность создавать блоки, ведущие себя как строчные элементы потенциально несёт очень много радости. С одной стороны, можно управлять такими блоками при помощи text-align , с другой — внедрять в текст, используя или как иконки, или как отдельные смысловые элементы, вместе с остальным текстом переносящиеся со строчки на строчку и обтекаемые флоатами.

Однако, существуют две причины, по которой вёрстка с использованием подобных блоков почти не получила распространения:

  1. display:inline-block в IE срабатывает только для изначально строчных элементов, вроде A , SPAN и прочих. При этом возможности обойти это, насколько мне известно, нет — век живи, век учись — если сначала у блока, пускай и блочного, стоит display:inline-block , а позже только для IE мы пропишем display:inline всё волшебным образом заработает.
  2. display:inline-block никак не работает в Firefox версий ниже 3-ей. Однако, есть один обходной путь.

Тогда, как Fx2 простой inline-block не понимает, существует проприетарное лисье свойство display:-moz-inline-box . К сожалению, это не полноценное решение проблемы, а костыль, имеющий множество ограничений по использованию, но на безрыбье и оно сгодится, если использовать его аккуратно.

Под аккуратностью я понимаю следующие моменты:

  • Для минимизации глюков поведения -moz-inline-box желательно внутрь такого элемента вставить дополнительный строковый элемент с display:block . Однако, в этом случае необходимо добавить float:left для IE, иначе он будет растягивать такой элемент на всю возможную (для безграничных возможностей ие) ширину.
  • Если нужно задавать фиксированные размеры для элемента inline-block , лучше задавать его и для самого элемента, и для внутреннего элемента (во избежание некоторых проблем).
  • Поведение -moz-inline-box местами непредсказуемое, поэтому во время разработки нужно чаще тестировать поведение таких элементов в Fx2, однако внутренние элементы уже будут обретать привычные черты.
  • Т.к. в Fx3 нормальное поведение inline-block уже реализовано, подключать решение нужно примерно так: display:-moz-inline-box; display:inline-block; , вторая лиса увидит только свою проприетарщину, а третья — заметит и стандартное значение, которое и применит.
  • К сожалению, применяя к подобным элементам vertical-align , очень сложно добиться одинакового выравнивания во всех браузерах.

P.S.: Следует упомянуть, что существует элемент, который практически во всех браузерах ведет себя как inline-block элемент почти безукоризненно. Это тег button . Правда, минусов у реализации inline-block при помощи кнопок предостаточно: много различных стилей, которые прийдется обнулять, невозможность кроссбраузерно и легко сделать простую ссылку на кнопочной основе, ну и изначальная семантика кнопки, из-за которой возможность её применения будет возникать очень редко.

Что делать, если не работает inline-block?

61751a70cf157983763972.png

Результат:

Здесь я хотел, чтобы History, Culture и Language были в одну линию.

  • Вопрос задан более двух лет назад
  • 282 просмотра
1 комментарий

Простой 1 комментарий

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS Не помещается. У вас body ограничен шириной 320пикс. Решения вопроса 1

iiiBird

iBird Rose @iiiBird Куратор тега CSS Пока ты спишь - твой конкурент совершенствуется ты уже использовал flex для header. что тебе мешает использовать его и на навигацию?
header .mnu_top Ответ написан более двух лет назад Нравится 1 4 комментария Samrux @Samrux Автор вопроса

Это, конечно, помогло поставить в ряд, но не подскажите ли ещё, что делать с линией, она должна быть до правого края.

iiiBird

iBird Rose @iiiBird Куратор тега CSS Samrux, ну ты сам ограничил body стилем max-width: 320px; Samrux @Samrux Автор вопроса iBird Rose, Да, однако там 20px, а не 320.

iiiBird

iBird Rose @iiiBird Куратор тега CSS Samrux, убери этот стиль
body

линия будет до правого края Ответы на вопрос 1

Pavel-ww

Надо очистить всё у ul а не только list-style, надо убрать display block у li > a, для li display inline, а не inline-block.

Или вместо всех этих inline для li просто воспользоваться современными технологиями

.mnu_top

Или вот так, что будет надежнее для старых IOS
.mnu_top

И еще с body разобраться. Вы все это пытаетесь делать при ширине body 320px. Это же всё не помещается внутрь body.
В целом, не грамотная верстка. Надо использовать контейнер, а не задавать ширину body.

И совет - вендорные префиксы добавляйте в самом конце, когда верстка уже готова и отлажена. Для этого есть post css плагины для редакторов кода

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *