CSS Rendering несогласованность на ul с Firefox, являющийся нечетным мячом

Фон

Я создавал вторичное меню навигации, используя встроенные неупорядоченные списки с якорями и заголовками. Используя лист CSS reset, все заголовки и привязки имеют значение "display: block". Когда задан стиль списка-списка: внутри Firefox и Camino отображают заголовки и привязки ниже пули, в то время как Safari, Camino и IE делают его встроенным.

Примеры снимков экрана

Пример кода

<html>
<head>
  <style type="text/css">
    /* css reset */
    h1, h2, h3, h4, h5, h6, a { display: block; }

    /* list styling */
    ul { list-style-position: inside; }
  </style>
</head>
<body>
<ul>
  <li>
    <h3>Primary</h3>
    <ul>
      <li>
        <h4>Secondary</h4>
        <ul>
          <li>
            <h5>Tertiary</h5>
            <ul>        
              <li><a href="#">Tertiary Link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
<ul>
</body>
</html>

Чтобы Firefox и Camino отображали то же самое, что и другие, я задавал неупорядоченные списки, заголовки и ссылки для "display: inline", но я все еще хочу знать...

Вопрос

Почему Firefox и Camino отображают элемент списка под списком, когда Safari, Opera и IE отображают его как "нормальный"?

Ответы

Ответ 1

Update

Это фактически нарушено и существует с 2000 года. Все еще не исправлено. Я думал, что понял, но это была ошибка с моей стороны. ВСЕ ЕЩЕ БРОК!: (

Ответ

Настройка свойства CSS в стиле list-style на "диск" приведет к тому, что движок рендеринга Firefox и Camino Gecko отобразит заголовки в неупорядоченном списке "normal".

Ответ фона

После рекомендации @o.k.w по поиску механизма рендеринга я обнаружил, что моя проблема была сообщена на bugzilla.mozilla.org 22 апреля 2000 года! (* Cough * Um, Mozilla... ошибка все еще есть.) Сообщенная ошибка в https://bugzilla.mozilla.org/show_bug.cgi?id=36854 обсуждает тот факт, что рендеринг Mozilla двигатель Gecko, имеет проблемы с отображением заголовков в неупорядоченном списке при отображении маркера элемента списка внутри. Он также говорит об этой проблеме:

"Это на самом деле похоже на серьезную проблему соответствия CSS1..." - Дэвид Барон

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

"В рекомендации CSS 2.0 есть описание: http://www.w3.org/TR/CSS2/generate.html#q11, которые говорят нам, что поведение Гекко неисправен ". - Listy Blaut

В нижней части этого документа есть предложение установить стиль списка CSS на диск:

ul        { list-style: disc }

Настройка неупорядоченного списка в стиле списка на "диск" имеет "исправленную" проблему рендеринга в браузерах браузера рендеринга Gecko, Firefox и Camino, оставляя списки неизменными в других браузерах. * Примечание. Хотя "диск" является свойство типа списка, если вместо "list-style-type: disc" используется вместо "list-style: disc" не устраняет проблему.

Пример примера решения

<html>
<head>
    <style type="text/css">
        /* css reset */
        h1, h2, h3, h4, h5, h6, a { display: block; }

        /* list styling */
        ul { list-style-position: inside; list-style: disc;}
    </style>
</head>
<body>
     <ul>
        <li>
          <h3>Primary</h3>
          <ul>
             <li>
                <h4>Secondary</h4>
                <ul>
                  <li>
                     <h5>Tertiary</h5>
                     <ul>            
                        <li><a href="#">Tertiary Link</a></li>
                     </ul>
                  </li>
                </ul>
             </li>
          </ul>
        </li>
     <ul>
</body>
</html>

Как я нахожу ответ на свой вопрос

Я могу наконец спать; )

Ответ 2

Поскольку заголовок является блочным элементом и, следовательно, попадает в следующую строку (поскольку элемент уровня блока, отображаемый как block (или без указанного в образе display -type [inline-block, inline, и т.д.) получает) не может поделиться линией, я не знаю, должен ли элемент списка (или не должен), согласно спецификации, содержать элементы уровня блока внутри себя или если он должен быть предположительно "разделять" строку с содержащимся элементом.

Возможно, я ошибался, обо всем этом; это просто единственное объяснение, о котором я мог думать.

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

Изменить

После копирования кода в файл шаблона и просмотра в FF3.0.10 я не вижу проблемы, о которой вы сообщаете. Полученный код, который я использовал, вставлен ниже, если вы еще не решили это, попробуйте код ниже и посмотрите, сохраняется ли проблема:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title><link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css">
    /* css reset */
    h1, h2, h3, h4, h5, h6, a { display: block; }

    /* list styling */
    ul {  width: 14em; margin: 1em auto;}
  </style>

</head>

<body>

<ul>
  <li>
    <h3>Primary</h3>
    <ul>
      <li>
        <h4>Secondary</h4>
        <ul>
          <li>
            <h5>Tertiary</h5>
            <ul>        
              <li><a href="#">Tertiary Link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
<ul>


</body>

</html>

Ответ 3

Я попробовал оба образца и немного экспериментировал сам.

Дифференцирующий фактор странно "list-style-position". Как-то в FF, "внутри" и "снаружи" имеют "встроенные" и "блокирующие" эффекты для пуль.

Я не могу сказать вам, почему, возможно, нужно копать в механизм рендеринга.

Ответ 4

list-style: disc интерпретируется как list-style: disc outside, поэтому я думаю, что просто избегает проблемы компоновки FF, а не фиксирует его.

У меня есть некоторый успех с обходным решением, которое устанавливает для первого-младшего элемента списка значение display: inline, которое помещает маркер в нужное место:

http://jsfiddle.net/6GhPT/2/

Я видел тот же неправильный рендеринг (маркеры списков, отображаемые выше блочных дочерних элементов списка) в IE ≤ 9.

Ответ 5

Ну, у меня была такая же проблема, но круг не был вариантом - мне нужна десятичная нотация. После нескольких минут исследований я нашел идеальное решение с

ol { counter-reset: li; } ol li h4:before { content: counter(li) ". "; counter-increment: li; } В элементе я хочу добавить элемент списка (в моем случае это ol > li > div > h3! Он может быть позиционирован как относительный/абсолютный). Эффект велик, количество элементов идеально конкатенатно с содержанием H3.

Я действительно предлагаю вам попробовать это. Вот полный урок: http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

Ответ 6

Исправление:

.dpe-flexible-posts li::before{
    content: '●';
    position: absolute;
    left: -14px;
    top: -1px;
}
.dpe-flexible-posts li{
    list-style-type: none;
    position: relative;
}