Я хочу выровнять несколько div по горизонтали. Это мой простой тестовый код.

<div style="text-align: center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

Он хорошо выглядит в хроме, но в IE не работает, как на картинке ниже

enter image description here

Почему он отличается от IE и Chrome? любые ответы были бы спасибо.

0
LSH 2 Авг 2017 в 08:49
Это изображение из проводника?
 – 
Carl Binalla
2 Авг 2017 в 08:51
Да я только что отредактировал свой вопрос. картинка из IE
 – 
LSH
2 Авг 2017 в 08:54
Я вижу, что ваш пример отлично работает в IE. IE11 на Win10.
 – 
Vadim Ovchinnikov
2 Авг 2017 в 08:59
Какая версия проводника? У меня работает нормально
 – 
Carl Binalla
2 Авг 2017 в 08:59
Visual studio 2010 устанавливал IE версии 5. Я решил эту проблему.
 – 
LSH
11 Авг 2017 в 04:53

2 ответа

Попробуй это:

<div style="text-align: center;">
    <div style="border:1px solid #000; display:inline-block; *display: inline;">Div 1</div>
    <div style="border:1px solid red; display:inline-block; *display: inline;">Div 2</div>
</div>
0
Saurav Jamwal 2 Авг 2017 в 09:03

Вот хороший ресурс по этой теме: http : //foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Обычно в IE есть триггер hasLayout. Запуск этого позволит вам использовать display: inline-block для элемента уровня блока (по умолчанию IE разрешает встроенный блок только для встроенных встроенных элементов).

Кроме того, более старая версия Fire Fox также не поддерживала inline-block, но имела значение «inline-stack» (moz-inline-stack).

Вот, насколько мне известно, лучший способ получить кроссбраузерный дисплей: встроенный блок:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
0
Mustafa Khan 2 Авг 2017 в 10:29