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

IE8 display inline-block not working

I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a ‘clearfix’ which is more mark up. I only need to target IE8 and would love to know why inline block doesn’t work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.

7 Answers 7

I’m guessing you haven’t declared a doctype. Try placing this on the first line, before the html tag:

The code you pasted works in IE8 with that doctype.

Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.

However, the workaround for lower IE versions did its job on that particular IE 8 as well:

You can set margin-right:1px

worked for me pretty well.

In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I’ve tried to say that it’s only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it’s down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason.

Р ешение inline-block

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

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

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

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 при помощи кнопок предостаточно: много различных стилей, которые прийдется обнулять, невозможность кроссбраузерно и легко сделать простую ссылку на кнопочной основе, ну и изначальная семантика кнопки, из-за которой возможность её применения будет возникать очень редко.

Опубликовано 30 сентября 2008 г. с метками: # Practical # Bugs # CSS # Outdated

Как исправить проблемы CSS разметки?

Изучая веб-разработку, вы будете часто бороться с CSS. В нем есть много вещей, о которых не знаешь, пока не столкнешься с ними нос к носу.

Особенно много проблем доставляет разметка макета. Например, вы пытаетесь что-то спозиционировать, но внезапно исчезают отступы, элемент уменьшается или пропадает или просто позиционируется не там, где нужно.

В интернете очень много запросов подобных следующим:

как удалить вертикальный отступ между дивами
как убрать горизонтальный отступ между дивами
как исправить схлопывание маргинов css
почему маргины внутренних элементов не работают
почему нижний/левый/правый маргин не работает

Да, схлопывание маргинов – это довольно сложная концепция, которая не сразу поддается пониманию. Узнать об этом подробнее можно здесь.

Есть и другие популярные вопросы, которые мы разберем прямо сейчас.

text-align: center не работает

Мы постоянно используем text-align: center для центрирования текста. Но это правило также может быть использовано для выравнивания элементов внутри родительского контейнера.

У новичков это часто не получается: текст внутри блока центрируется, а сам блок – нет. Почему? Потому что элемент, который вы пытаетесь выровнять является блочным.

По умолчанию он занимает 100% ширины родителя, поэтому его невозможно выровнять по центру. Чтобы решить проблему, ему следует установить строчно-блочный тип отображения.

Рассмотрим на примере.

Есть вот такая разметка:

и вот такие стили:

В браузере это выглядит следующим образом:

Текст выровнялся по центру, но сам элемент – нет. Теперь вы знаете, что это происходит из-за того, что он имеет блочный тип отображения. Чтобы сработало свойство text-align: center , он должен быть строчным или строчно-блочным.

Добавим всего одну строчку в файл стилей:

Теперь все правильно:

И это совсем не магия, ведь вы знаете, как все работает ��

Расстояние между инлайн-блочными элементами

С этой проблемой сталкивался каждый CSS-новичок.

Самая раздражающая ситуация, когда у вас есть родительский контейнер и внутри него два элемента, между которыми вы хотите поровну поделить пространство.

Предполагается, что каждому нужно назначить ширину в 50%, однако это не работает. Непонятное расстояние между ними заставляет второй элемент сползать на следующую строчку, так как итоговая сумма размеров превышает 100% родителя.

В этом моменте начинаются истерики и появляются костыли с волшебными цифрами вроде width: 49.76% .

Разберемся на примере: есть два элемента с одинаковой шириной и высотой, и требуется, чтобы они занимали 50/50 доступного пространства внутри своего родителя.

и получаем вот это:

Есть 2 распространенных способа решения этой проблемы.

использовать комментарии;
удалить пространство между тегами в HTML-файле.

Теперь все нормально:

Примечание переводчика:
Строчно-блочные элементы воспринимаются браузером как обычные слова в предложении, поэтому он разделяет их пробелом, ширина которого примерно равна 4px. Оба способа позволяют убрать этот пробел на физическом уровне.
Также можно воспользоваться CSS и установить для контейнера нулевой размер шрифта. При этом пробел сохранится, но будет иметь нулевую длину. Этот способ часто используется, но подходит не для всех ситуаций.

«Съезжание» строчно-блочных элементов

Эта проблема появляется, когда у вас есть два строчно-блочных элемента и вы добавляете в один из них больше контента.

Для примера возьмем вот такую разметку:

и вот такие стили:

Макет сломался из-за того, что вершина первого элемента сползла к низу второго – это проблема выравнивания. Решить ее очень легко, есть целых два пути:

overflow: hidden;
vertical-align: middle (или top, или bottom, если вы понимаете, как это работает).

overflow: hidden

Это свойство можно добавить всем строчно-блочным элементам в ряду или только тому, который вызвал проблему:

vertical-align: middle

В этом решении вместо overflow используется vertical-align . Тип выравнивания может быть любым: top, middle, bottom.

Если использовать top для элементов с разной высотой, то результат будет следующий:

С другими значениями, вы можете поэкспериментировать самостоятельно.

Если вы не понимаете, как работает вертикальное выравнивание, просто используйте вместо него overflow: hidden .

А мы попробуем выровнять блоки в примере:

Плавающие элементы не имеют высоты?

Это одна из самых раздражающих проблем CSS.

Допустим, у вас есть 2 заголовка, вы устанавливаете одному float: left , и внезапно второй прилипает к верху сайта перед ним, как будто в разметке он идет первым.

Или например, вы устанавливаете float обоим заголовкам, одному – влево, а другому &ndahs; вправо. Тогда элемент, идущий после них, поднимется вверху.

Существует 3 возможных решения для этой проблемы:

overflow: hidden ;
display: inline-block .

oveflow: hidden

Нужно обернуть плавающие элементы в родительский контейнер и уже для него установить overflow: hidden .

display: inline-block

Решение похоже на предыдущее, только вместо overflow: hidden родительскому элементу добавляется display: inline-block .

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

Чтобы все работало, вам нужно вычислить и установить новую ширину для родителя. Это похоже на фокус: нужно найти текущую ширину родителя и прибавить к ней текущую ширину плавающего элемента. Теперь второй заголовок окажется рядом с первым.

На самом деле тут все можно объяснить. Раньше контент второго заголовка просто не мог поместиться рядом с первым, потому что инлайн-блочный родитель имел ширину, равную максимальному непереносимому контенту. Когда мы искусственно установили ему ширину, позволяющую вместить оба элемента, неплавающий блок смог растянуться на всю ширину, а его контент уместился даже сдвинувшись относительно плавающего элемента.

Сложно, непонятно и сбивает с толку? Да, есть немного. На самом деле, вам не следует использовать это решение, так как оно совершенно немасштабируемо. Если размеры блоков могут меняться (например, при увеличении шрифта), оно не подходит.

Поэтому пойдем более простым путем и сделаем второй заголовок строчно-блочным либо также плавающим.

Не забудьте использовать вертикальное выравнивание.

Стили с вертикальным выравниванием:

А этот пример без выравнивания:

Margin-top не работает?

Еще одна из самых распространенных проблем, которую часто решают с помощью паддингов, вместо того, чтобы разобраться, в чем дело.

Эта проблема известна как схлопывание полей.

Представим, что один элемент расположен внутри другого. Если назначить margin-top внутреннему блоку, то он появится у внешнего, а отступ потомка от родителя не изменится.

Есть целых 6 решений этой проблемы (но не все из них хороши).

display: inline-block для дочернего элемента;
display: inline-block для родительского элемента;
overflow: hidden для родительского элемента;
position: absolute для родительского элемента;
установка прозрачной рамки для родителя;
установка верхнего паддинга для родителя (можно использовать очень маленькие значения, десятые доли пикселя).

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

Пятый и шестой варианты действуют за счет оформления верхней границы родительского элемента. Если на пути маргина встает рамка или паддинг, схлопывание не происходит.

Третье и четвертое решение неочевидны и имеют свои подводные камни, поэтому по возможности лучше их не использовать. Отмена стандартного схлопывания в этих случаях является побочным эффектом.

После применения любого из этих способов результат будет такой:

Вот с такими проблемами часто сталкиваются начинающие веб-разработчики. Надеюсь, статья была полезной.

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

Добрый день друзья. Есть вопрос по поводу верстки, верстаю макет — и в блоке услуг не могу выравнить блоки с видами ремонта в одну линию, задал в hmtl класс, в css — задал отступы и display:inline-block, и ничего не происходит.

Проблема в этом <- Если есть надобность могу скинуть весь архив с проектом

Изменено 7 декабря 2016 пользователем Владимир Горинов

Ссылка на комментарий

Поделиться на других сайтах

6 ответов на этот вопрос

Сортировать по голосам
Сортировать по дате

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.