IE8 наследует ширину родительского элемента - PullRequest
Новая
       4

IE8 наследует ширину родительского элемента

0 голосов
/ 07 октября 2009

Я хочу, чтобы коробка содержала как минимум два элемента внутри, и каждый элемент должен быть размером с самый большой элемент Это отлично работает в FF / Safari, но не в IE. 

<html>
  <head>
    <title>whatever</title>
  <style>
    .box {
      display: table;
      width: 250px;
      border: 1px solid red;
          padding: 10px;
    }

        .top {
          border: 1px solid blue;
        }

        .bottom {
          border: 1px solid green;
          margin-top: 10px;
        }
  </style>
</head>
<body>
      <div class="box">
        <div class="top">
          top
        </div>
        <div class="bottom">
          bottom
          oooooooooooooooooooooooooooooooooooooooooooooooooo
        </div>
      </div>
</body>
  </html>

Обновление:

Задание .top шириной 100% не работает. Div (или блочный элемент) имеет 100% по умолчанию. В любом случае, он должен быть таким большим.

Update2:

Снятие дисплея: таблица ничего не меняет.

Ответы [ 3 ]

2 голосов
/ 07 октября 2009

Добавьте строгий тип документа на свою страницу, иначе IE будет в режиме причуд: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

С этим вверху файла он работает в IE8 для меня.

EDIT

Что касается дальнейших исследований, я уверен, что поддержка таблиц в IE8 полностью глючит. Я добавил элемент-обертку в текст, чтобы точно имитировать таблицу (код ниже). Затем я поставил фактическую таблицу ниже. Таблица работает точно так, как вы хотите, но эквивалент в div не работает. Я пробовал другие элементы, такие как span, но все равно не работает.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>whatever</title>
  <style>
    .box {
        display: table;
        width: 250px;
        border: 1px solid red;
        padding: 10px;
        padding: 5px;
    }

    .top {
        display: table-row;
        margin: 10px;
        padding: 5px;
    }

    .bottom {
        display: table-row;
        margin: 10px;
        padding: 5px;
    }

    .top .cell {
        display: table-cell;
        border: 1px solid blue;
        margin: 5px;
        padding: 5px;
    }
    .bottom .cell {
        display: table-cell;
        border: 1px solid green;
        margin: 5px;
        padding: 5px;
    }
  </style>
</head>
<body>
      <div class="box">
        <div class="top">
          <div class="cell">top</div>
        </div>
        <div class="bottom">
          <div class="cell">bottom
          oooooooooooooooooooooooooooooooooooooooooooooooooo</div>
        </div>
      </div>

      <br><br>

      <table style="border: 1px solid red; display: table;width: 250px">
      <tr style="display: table-row;">
          <td style="border: 1px solid blue; display: table-cell;">top</td>
      </tr>
      <tr style="display: table-row;">
          <td style="border: 1px solid green; display: table-cell;">bottom
          oooooooooooooooooooooooooooooooooooooooooooooooooo</td>
      </tr>
      </table>
</body>
</html>
0 голосов
/ 07 октября 2009

Я не уверен, является ли ширина унаследованным атрибутом для div.

Чтобы устранить проблему, установите ширину .top на 100%.

0 голосов
/ 07 октября 2009

Дайте обоим элементам width:100% или display:table-row.

Это происходит, вероятно, потому что у вас есть display: table; для родительского div. display: table указывает элементу отображаться в виде таблицы. Вложенные элементы должны отображаться как table-row и table-cell, имитируя старые добрые TR и TD.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...