Rzućmy okiem na some comments1) na stronie generowanej przez Wordpress (to nie jest miejsce ja utrzymać, jestem tylko ciekaw co tu się dzieje). Ponieważ te strony mogą zniknąć w najbliższej przyszłości, dodałem kilka zrzutów ekranu online. Oto, co widziałem:Dziedziczenie własności list-style-type w Firefoksie (błąd w Firebug?)
Oczywiście, znaczniki list-item nie powinno tam być. Postanowiłem więc spojrzeć na źródło za pomocą Firebuga. Jak widać, Firebug twierdzi, że właściwość list-style
(zawierająca none
) jest dziedziczona po ol.commentlist
. Ale jeśli tak, dlaczego krąg i kwadrat są widoczne? Podczas sprawdzania obliczonego stylu Firebug poprawnie pokazuje list-style-type
s.
Jakie jest prawidłowe zachowanie? Właśnie zrobiłem szybki test w chrom, którego Web Inspector dał lepszy obraz rzeczywistości (lista pozycji markerów były również wyświetlane w tej przeglądarce):
Według WebKit, list-style
z ol.commentlist
nie jest dziedziczone, tylko domyślna wartość list-style-type
z silnika renderującego.
Możemy więc wywnioskować, że dane wyjściowe obu przeglądarek są poprawne, a Firefox (Firebug) pokazuje niepoprawną reprezentację dziedziczonych stylów. Co mówi CSS specification?
spadków przeniesie wartości
list-style
zOL
iUL
elementówLI
elementów. Jest to zalecany sposób określania stylu listy w stylu listy .
Nie wiele informacji na temat dziedziczenia właściwości ol
do ul
s. Czy Firebug jest błędny pod tym względem, czy powinien zagnieżdżać (niektóre) właściwości z ol
s (a jeśli tak, dlaczego elementy nie są odpowiednio renderowane w dwóch zupełnie różnych przeglądarkach)? Aby było jasne, moje aktualne pytanie brzmi: , które właściwości powinny zagnieździć się w elementach dziedziczących po ol
elementach, które je obejmują?
EDIT: zapomniałem o operze, a obraz staje się jeszcze bardziej oczywiste, gdy patrząc na inspektora przeglądarki:
Jako prawy panel sugeruje, zagnieżdżone ul
elementy dziedziczą właściwości z ol
elementy, ale domyślne wartości przeglądarki list-style-type
i list-style-position
zastępują te określone przez jego macierzystą.
Ponieważ Vinhboy podtrzymuje moje podejrzenie, że jest to jakiś błąd (Firefox? Firebug?), Zgłosiłem numer bug report.
BTW, udało mi się dać znaczniki znikają po prostu zmieniając linię 312 style.css do
ol.commentlist, li.commentlist, ul.children {
Kiedy również jednoznacznie definiując list-style
z ul.children
do none
, markery nie są pomalowane. Możesz zerknąć na zrzuty ekranu Firebug i WebKit's Web Inspector w tym przypadku, jeśli chcesz.
1) Po skontaktowaniu się z twórcą strony wbił niechcianych lista znaczników, więc nie widać ten problem już (bez edycji CSS w locie). Nadal możesz spojrzeć na zrzuty ekranu, aby zobaczyć, o co w tym wszystkim chodzi, ale zrobiłem też przypadek testowy i dodałem to do mojego bug report. Dla każdego wygody, źródło HTML/CSS brzmi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><ol>/<ul> 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 <ul>:
<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>
Wystarczy wybrać ul
i zauważ, że Firebug mówi, że odziedziczył własności list-style z ol
(choć nie, kiedy patrzymy na faktycznie wyrenderowana strona).
Proszę porównać to z inspektorem sieci WebKit, a zwłaszcza z opcją Opera . Ten ostatni explicitly makes clear, że spadnie z powrotem do domyślnych wartości list-style-type
iprzeglądarki.
Bardzo dobra obserwacja. wygląda na to, że firebug jest tutaj nieprawidłowy. – vinhboy
Dobrze zauważyłem, ale nie jestem pewien, jakie jest twoje pytanie? – graphicdivine
@graphicdivine: Już się tego obawiałem. Aby było jasne, ustawiłem moje aktualne pytanie pogrubioną czcionką. Dodałem także minimalny przypadek testowy, ponieważ oryginalna strona, do której przyłączyłem, została naprawiona. –