Несоответствие рендеринга CSS на ul с Firefox является странным шариком - PullRequest
Новая
       5

Несоответствие рендеринга CSS на ul с Firefox является странным шариком

22 голосов
/ 17 июля 2009

Фон

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

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

Firefox and Camino rendering
(источник: michaelgrace.org )
Safari, Opera, and IE rendering
(источник: michaelgrace.org )

Пример кода 

<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 отображают его "нормально"?

Ответы [ 6 ]

29 голосов
/ 17 июля 2009

Обновление

Это на самом деле сломано и было с 2000 года. Все еще не исправлено. Я думал, что понял это, но это была ошибка с моей стороны. Все еще сломано! (

Ответ

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

Фон ответа

После следования совету @ o.k.w по поиску в движке рендеринга я обнаружил, что о моей проблеме было сообщено на bugzilla.mozilla.org 22 апреля 2000 года! (* Каш * Мм, 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, оставив списки без изменений в других браузерах. * Примечание. Хотя «диск» является свойством типа стиля списка , если вместо «списка стиля: диска» используется «список стиля стиля: диск», это не решает проблему.

Пример кода решения 

<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>

Как я чувствую, находя ответ на свой вопрос

alt text
(источник: michaelgrace.org )

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

4 голосов
/ 17 июля 2009

Поскольку заголовок является элементом блока и поэтому перемещается на следующую строку (поскольку элемент уровня блока отображает как block (или без указания display -типа [* 1005, если не указано иное) *, 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 голосов
/ 17 июля 2009

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

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

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

2 голосов
/ 27 апреля 2015

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

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/

2 голосов
/ 22 февраля 2012

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

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

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

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

0 голосов
/ 23 сентября 2014

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

.dpe-flexible-posts li::before{
    content: '●';
    position: absolute;
    left: -14px;
    top: -1px;
}
.dpe-flexible-posts li{
    list-style-type: none;
    position: relative;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...