Можем ли мы центрировать эти div "IE7 и выше" с переменной шириной по горизонтали, не используя inline-block?

Без:

  • добавив туда любой элемент разметки;
  • без использования display: inline-block;
  • не зная ширину div;
  • без хаков. код должен подтвердить.

Как мы можем центрировать эти три элемента по горизонтали, но сделать их встроенными?

http://jsfiddle.net/mMPMh/

Пожалуйста, обратите внимание: причина, по которой я избегаю inline-block, лежит на том, что IE7 должен себя вести. Другие правила, которые не работают в IE 7, также должны игнорироваться.

Является ли это возможным?

Источник

2 ответа

Решение

Вот так - http://jsfiddle.net/mMPMh/10/

Или это - http://jsfiddle.net/mMPMh/14/? Этот работает с IE7

Что касается хаков, он может быть обслужен с помощью условного оператора, например

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Или используя это в своем HTML (из HTML5BP)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

И служить стилю, как это:

.lt-ie8 #one,
.lt-ie8 #two,
.lt-ie8 #three {
    display:inline;
    zoom:1;
}

Нет хаков

Источник

UPD: после обновления своего вопроса вы можете использовать для IE display:inline;, может быть, это решит вашу проблему?

Вот так - http://jsfiddle.net/mMPMh/4/?

Удалить float, поставьте галочку и дайте, если вам нужны высота и ширина.

Источник
Другие вопросы по тегам