Невозможно заставить 3 колонки работать в списке для IE7 - PullRequest
Новая
       16

Невозможно заставить 3 колонки работать в списке для IE7

0 голосов
/ 04 марта 2009

Я пытаюсь создать область с 3 столбцами в элементе списка. Чтобы добиться этого, я использую стандартный метод, состоящий из трех элементов, из которых первые два - это стороны, плавающие влево и вправо, а третий - это содержимое, которое должно находиться между ними. Следующий HTML-код отлично работает в Firefox, но не корректно отображается в IE7 - содержимое отображается ниже двух плавающих элементов. Есть идеи, в чем проблема? 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
        *
        {
            margin: 0;
            padding: 0;
            border: 0;
        }
        span
        {
            display:block;
        }
        .corner
        {
            width: 12px;
            height: 12px;
        }
        .tl
        {
            float: left;
        }

        .tr
        {
            float: right;
        }
        .fill
        {
            margin: 0px 12px;
        }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span class="tl corner">a</span>
        <span class="tr corner">b</span>
        <span class="fill">text text text</span>
      </li>
    </ul>
  </body>
</html>

Обратите внимание, что замена интервалов на div приводит к тому же эффекту. Я также попробовал различные DocTypes без удачи. И он отлично работает вне списка, поэтому проблема, по-видимому, связана с использованием списка.

Ответы [ 4 ]

2 голосов
/ 04 марта 2009

То, как IE это видит, вы пытаетесь застрять в строках один за другим, но первые два уже заняли свое место, FLOATing далеко, что оставляет последний SPAN в LI для борьбы за следующий уровень, который в IE выглядит следующим уровнем ниже.

Так как последний SPAN не является плавающим, поэтому он также выбрасывается на следующий уровень.

Кроме того, SPAN являются встроенными стилями, а не элементами блочного уровня. Вам следует заменить SPAN на DIV, если вы все еще хотите попробовать и стилизовать его в элементе LI.

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

Но лучшая тактика заключается в создании этого плавающего элемента из 3 столбцов вне LI и в настройке DIV.

Прочитайте CSSplay или Max Design при создании 3 макетов столбцов.

0 голосов
/ 04 марта 2009

Ответ заключается в том, чтобы обернуть промежутки в элемент уровня блока (скажем, div), со значением переполнения, скрытым Пример получен из более глубокого взгляда на 2-й пример CSSplay.

0 голосов
/ 04 марта 2009

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

0 голосов
/ 04 марта 2009

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

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

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

...