Как создать совместимый с IE6 макет сетки из неупорядоченного списка? - PullRequest
Новая
       15

Как создать совместимый с IE6 макет сетки из неупорядоченного списка?

1 голос
/ 05 апреля 2009

Я хочу, чтобы неупорядоченный список в стиле HTML был похож на сетку. Желаемый результат примерно такой:

Grid as rendnered by Firefox
(источник: georgebrock.com )

У меня есть следующий HTML: 

<ul class="grid">
  <li>First item. This is sometimes longer than the second item.</li>
  <li>2nd item</li>
  <li class="reset">Third item</li>
  <li>Fourth item</li>
</ul>

В стиле следующего CSS: 

ul.grid {
  /* Remove standard browser list styles */
  list-style:none;
  margin:0;
  padding:0;

  /* Add specific styles */
  width:13.5em; /* Clear internal floats (IE) */
  overflow:hidden; /* Clear internal floats (proper browsers) */
  background-color:#f00;
  border-bottom:0.5em solid #f00;
}

ul.grid li {
  display:inline; /* IE6 double margin float bug fix */
  width:5em;
  float:left;
  padding:0.5em;
  margin-left:0.5em;
  border-top:0.5em solid #f00;
  padding-bottom:1000.5em; /* } Balance height of items */
  margin-bottom:-1000em;   /* } */
  background-color:#fff;
}

ul.grid li.reset {
  clear:left;
}

В Firefox, Safari и т. Д. Это отображается при необходимости Однако в IE 6 очистка не влияет на последующие элементы одинаково:

Grid as rendnered by Internet Explorer 6
(источник: georgebrock.com )

Вы можете увидеть пример кода здесь: http://georgebrock.com/misc/css-grid/

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 05 ноября 2014

Вопрос старый, но интересный. Не удалось найти IE6, но такая же проблема существует в IE7. Реального решения для этого не существует, но визуально в IE7 это может быть достигнуто путем игры с шириной и использования комбинатора соседних братьев (+). Для IE6 каждый элемент списка должен иметь новый класс. Итак, не реальная сетка, а она looks like a grid: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test case: CSS grids</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css" media="screen">
            ul.grid {
                /* Remove standard browser list styles */
                list-style: none;
                margin: 0;
                padding: 0;

                /* Add specific styles */
                width: 220px; /* Clear internal floats (IE) */
                overflow: hidden; /* Clear internal floats (proper browsers) */
                border-bottom: 1px solid red;
            }

            ul.grid li {
                display: inline; /* IE6 double margin float bug fix */
                float: left;
                border: 1px solid red;
                padding: 5px;
                padding-bottom:1000.5em; /* } Balance height of items */
                margin-bottom:-1000em; /* } */
            }
            ul.grid li.reset {
                clear:left;
            }
            ul.grid li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li + li {
                width: 97px;
                border-left: 1px solid red;
                border-right: 0 none;
                padding-left: 5px;
            }
            ul.grid li + li + li + li {
                padding-left: 9px;
                border-left: 0 none;
                border-right: 1px solid red;
            }
            ul.grid li + li + li + li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li + li + li + li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li + li + li + li + li + li {
                width: 97px;
                border-left: 1px solid red;
                border-right: 0 none;
                padding-left: 5px;
            }
            ul.grid li + li + li + li + li + li + li + li {
                padding-left: 9px;
                border-left: 0 none;
                border-right: 1px solid red;
            }
            ul.grid li + li + li + li + li + li + li + li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li + li + li + li + li + li + li + li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
        </style>
    </head>

    <body>

        <ul class="grid">
            <li class="reset">First item. This is sometimes longer than the second item.</li>
            <li>2nd item</li>
            <li class="reset">Third item</li>
            <li>Fourth item</li>
            <li class="reset">Fifth item</li>
            <li>Sixth item is maybe longer for a line.</li>
            <li class="reset">7th item</li>
            <li>Eight item is again longer</li>
            <li class="reset">9th item. This is sometimes longer than other.</li>
            <li>Tenth item</li>
        </ul>

    </body>
</html>
0 голосов
/ 19 декабря 2012

Я бы предпочел использовать таблицы для этого, но если вы не можете (например, CMS или третья сторона выдвигает вам эту разметку).

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

Библиотеки, такие как jQuery, могут помочь с этим.
Увидеть: Получение фактической высоты элемента с самовосстановлением в IE

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

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

...