2010-04-14 13 views
10

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

Screenshot of comments, together with the nifty little Firebug thing

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

View of Chromium's web inspector showing the same page

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 z OL i UL elementów LI 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:

Opera's web inspector pane

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

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.

+0

Bardzo dobra obserwacja. wygląda na to, że firebug jest tutaj nieprawidłowy. – vinhboy

+0

Dobrze zauważyłem, ale nie jestem pewien, jakie jest twoje pytanie? – graphicdivine

+0

@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. –

Odpowiedz

2

W rzeczywistości twoje założenie co do dziedziczenia stylów jest trochę za złe. Dziedziczenie byłoby od li.commentlist, a nie ol.commentlist. Powodem rozbieżności jest to, że Firefox akceptuje styl listowania do elementów listy, jak również do owijania list. Aby całkowicie wyłączyć punktory na liście nieuporządkowanej, należy ustawić typ listy dla znacznika UL. Z tego powodu zawsze usuwam typ listy z opakowania listy i stosuję go do elementów listy.

To jedna z tych różnic między przeglądarkami, których wszyscy musimy się nauczyć i dostosować. Innym przykładem tej niespójności jest użycie marginesu i dopełnienia na znaczniku BODY. Aby zachować spójność renderowania we wszystkich przeglądarkach, usuń margines, a następnie ustaw wypełnienie.

Powiązane problemy