<th> kompatybilność z tekstem

W nagłówku tabeli domyślne wyrównanie tekstu dla znacznika th znajduje się pośrodku.<th> kompatybilność z tekstem

Rozważmy następujący kod:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      body { 
       background-color: aliceblue; 
      } 
      .default_grid { 
       text-align: left; 
       width: 600px; 
       color: white; 
      } 
       .default_grid th { 
        /* text-align: left; */ 
       } 
       .default_grid .first { 
        background-color: purple; 
       } 
       .default_grid .second { 
        background-color: orange; 
       } 
     </style> 
    </head> 
    <body> 
     <table class="default_grid"> 
      <thead> 
       <tr> 
        <th class="first">Test One</th> 
        <th class="second">Test Two</th> 
       </tr> 
      </thead> 
     </table> 
    </body> 
</html>

w Firefox, Internet Explorer 7 (& niższy), Safari, Chrome i Opera tekst w < th> jest wyrównany w lewo. Podczas gdy w Internet Explorer 8 i Internet Explorer 9 tekst jest wyrównany do środka, chyba że reguła jest określona bezpośrednio na < th> znaczniku (linia komentarza nr 14).

Który z nich jest prawidłowym zachowaniem?

Źródło

2012-07-04 vulcan raven

Według

wizualne środki W3C Recommendation for TH, użytkownik zwykle powodują, elementy TH pionowo i poziomo wyśrodkowany w komórce oraz w pogrubienie masy czcionki.

Nie ma wzmianki o tym, jak to koniecznością zachowywać (?), Czy to musi dziedziczyć styl od rodzica?

Fakty są następujące:

Domyślnie wszystkie przeglądarki centrum wyrównać tekst w TH elementu.
Internet Explorer niższy, Firefox, Chrome, Safari i Opera ustaw (tylko †) text-align własność TH do dziedziczą od rodzica <thead>, <table>, <body> i tak na.
Internet Explorer 8 i późniejsza nie pozwala TH odziedziczyć dopasować tekst właściwość z nadrzędnego. Musisz kierować tag TH na selektor CSS, aby zmienić jego wartość.
† Wszystkie przeglądarek nie odziedziczą font-weight nieruchomości od rodzica. Musisz kierować tag TH na selektor CSS, aby zmienić jego wartość.

Patrząc na to zdjęcie, nie możemy uogólnić, która przeglądarka wykonuje właściwą pracę. Albo zabronienie zarówno text-align i font-weight dziedziczyć wartość (Internet Explorer 8 a później droga) lub "pozwalając jeden i upuszczanie innych" (zakaz Internet Explorer 8+ sposób) jest lepsza ; to według uznania sprzedawcy.

Będąc projektantem, ogólna zasada jest taka, że musimy wybrać te praktyki, które działają we wszystkich przeglądarkach.W takim przypadku zawsze wybieraj wartość docelową TH, aby zmienić wartość wyrównywania tekstu i o wadze czcionki.

Źródło

2012-07-04 02:32:47

"Musisz kierować znacznik TH za pomocą selektora CSS, aby zmienić jego wartość" ... To zadziałało. Dzięki. –

Mimo że odpowiedź @ vulcanraven była zasadniczo poprawna, kiedy publikowano, sytuacja uległa zmianie. Obecna specyfikacja HTML5 HTML opisuje "oczekiwane renderowanie", które nie jest obowiązkowe, ale może być uznane za domyślnie zalecane, a dostawcy przeglądarek mogą, jeśli chcą, żądać zgodności z nim. Reguły "oczekiwanego renderowania" dla th obejmują:

"Od agentów użytkownika oczekuje się, że będą mieli regułę w swoim arkuszu stylów agenta użytkownika, która pasuje do elementów, które mają węzeł nadrzędny, którego wyliczona wartość dla właściwości 'text-align' jest wartością początkową, której blok deklaracji składa się z pojedynczej deklaracji, która ustawia właściwość "wyrównywanie tekstu" na wartość "centrum". "

To dość skomplikowany sposób powiedzenia, że elementy th są wyśrodkowane domyślnie. (Jest to również nieparzyste, ponieważ CSS nie ma żadnego sposobu na odniesienie się do obliczonej wartości właściwości w ten sposób.) Ale tak naprawdę mówi, że ma to zastosowanie tylko wtedy, gdy element macierzysty, a mianowicie element tr, nie ma wartości text-align ustawionej na różnią się od left.

Jednak wiele nowoczesnych przeglądarek nie implementuje tego. W Chrome i Firefox komórki są wyrównane do lewej. Jeśli przetestujesz prostą tabelę bez CSS lub atrybutów prezentacji i przejrzysz ją za pomocą narzędzi programistycznych, możesz zauważyć, że komórki th są wyśrodkowane, ale nie jest to odzwierciedlone w CSS; te przeglądarki obliczają właściwości zgodnie z regułami CSS (i nie mają reguł arkusza stylów przeglądarki, jak opisano w "oczekiwanym renderowaniu"), ale jeśli text-align nie jest w ogóle ustawiony dla text-align w ogóle nie jest ustawiony dla th, jest wyśrodkowany i text-align jest pokazany jako center, jakby z błękitnego nieba. Oznacza to, że te przeglądarki mają reguły ad hoc, które dotyczą "domyślnego centrowania". IE 11 wydaje się implementować "sugerowane renderowanie" i pokazuje komórki tutaj wyśrodkowane, ale nie pokazuje, na czym oparte są reguły CSS.

Źródło

2015-02-03 19:52:11

<th> kompatybilność z tekstem

Odpowiedz

Powiązane problemy