Наследование свойства list-style-type в Firefox (ошибка в Firebug?) - PullRequest
10 голосов
/ 14 апреля 2010

Давайте посмотрим некоторые комментарии 1) на странице, созданной Wordpress (это не сайт, который я поддерживаю, мне просто интересно, что здесь происходит). Поскольку эти страницы могут исчезнуть в ближайшем будущем, я выложил несколько скриншотов онлайн. Вот что я увидел:

Screenshot of comments, together with the nifty little Firebug thing

Очевидно, маркеров элементов списка там быть не должно. Поэтому я решил посмотреть на источник, используя Firebug. Как видите, Firebug утверждает, что свойство list-style (содержащее none) унаследовано от ol.commentlist. Но если это так, то почему видны круг и квадрат? При проверке вычисленного стиля Firebug правильно показывает list-style-type s.

Какое правильное поведение? Я только что сделал быструю проверку в Chromium, веб-инспектор которого дал лучшее представление о реальности (маркеры элементов списка также отображались в этом браузере):

View of Chromium's web inspector showing the same page

Согласно WebKit, list-style из ol.commentlist не наследуется, только значение по умолчанию list-style-type от движка рендеринга.

Итак, мы можем заключить, что вывод обоих браузеров правильный, и что Firefox (Firebug) показывает неверное представление унаследованных стилей. Что говорит CSS-спецификация ?

Наследование передаст list-style значения от OL и UL элементы к LI элементам. Это рекомендуемый способ указать стиль списка информация.

Не так много о наследовании ol свойств ul s. Является ли Firebug неправильным в этом отношении, или вложенные ul s наследуют (некоторые) свойства от ol s (и если да, то почему элементы не отображаются соответственно в двух совершенно разных браузерах)? Чтобы быть ясным, мой фактический вопрос: какие свойства должны вложенные ul элементы наследовать от ol элементов, которые их заключают?

РЕДАКТИРОВАТЬ: Я забыл об Opera, и картинка становится еще более четкой, если посмотреть на инспектор этого браузера:

Opera's web inspector pane

Как показывает правая панель, вложенные элементы ul наследуют свойства от элементов ol, но значения по умолчанию в браузере list-style-type и list-style-position переопределяют значения, указанные его родителем.

Поскольку Vinhboy поддерживает мое подозрение, что это где-то ошибка (Firefox? Firebug?), Я подал отчет об ошибке .


Кстати, мне удалось позволить маркерам исчезнуть, просто изменив строку 312 style.css на

ol.commentlist, li.commentlist, ul.children {

При явном определении list-style от ul.children до none маркеры не окрашиваются. Вы можете посмотреть скриншоты Firebug и WebKit Web Inspector в этом случае, если хотите.


1) После обращения к разработчику страницы он исправил маркеры нежелательных списков, чтобы вы больше не могли видеть эту проблему (без редактирования CSS на лету). Вы все еще можете посмотреть на скриншоты, чтобы понять, о чем идет речь, но я также сделал тестовый пример и добавил его в свой отчет об ошибке . Для удобства всех источник HTML / CSS гласит:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>&lt;ol&gt;/&lt;ul&gt; inheritance test case</title>
  <style>
   ol {
     list-style: none;
   }
  </style>
 </head>
 <body>
  <!-- Some of the text below is quoted from D.E. Knuth, The TeXBook, p. 395 -->
  <ol>
   <li>First item</li>
   <li>Second one</li>
   <li>Now let's have some fun with a nested &lt;ul&gt;:
    <ul>
     <li>First item</li>
     <li>And the second one again (this is incredibly boring, but it's just an example)</li>
     <li>Ho hum</li>
     <li>Are you still there?</li>
    </ul>
   </li>
   <li>Just another item</li>
  </ol>
 </body>
</html>

Просто выберите ul и обратите внимание, что Firebug говорит, что он унаследовал свойство стиля списка из ol (хотя это не так, когда мы смотрим на фактически отображаемую страницу).

Пожалуйста, сравните это с веб-инспектором WebKit и особенно с Opera. вариант. Последний явно дает понять , что он возвращается к браузеру значения по умолчанию list-style-type и list-style-position.

1 Ответ

2 голосов
/ 21 апреля 2010

На самом деле ваше предположение о наследовании стиля немного ошибочно.Наследование будет от li.commentlist, а не ol.commentlist.Причина расхождения заключается в том, что Firefox допускает стилизацию типа списка для элементов списка, а также для оболочек списка.Чтобы полностью отключить маркеры в неупорядоченном списке, вы должны установить тип списка для тега UL.Именно поэтому я всегда удаляю тип списка из оболочки списка и применяю его к элементам списка.

Это лишь одно из тех отличий рендеринга между браузерами, которые мы все должны изучить и настроить.Другим примером этого несоответствия является использование полей и отступов для тега BODY.Чтобы обеспечить постоянный рендеринг во всех браузерах, вы должны удалить поле и затем установить отступы.

...