2012-07-04 30 views
5

Trong tiêu đề bảng, căn chỉnh văn bản mặc định cho thẻ th là chính giữa.<th> khả năng tương thích giữa văn bản

Xét đoạn mã sau:

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

Trong Firefox, Internet Explorer 7 (& thấp hơn), Safari, Chrome và Opera văn bản trong thứ <> được liên kết trái. Trong khi ở Internet Explorer 8Internet Explorer 9, văn bản được căn giữa trừ khi quy tắc được chỉ định trực tiếp trên < th> thẻ (dòng bỏ ghi chú số 14).

Hành vi nào là đúng?

Trả lời

15

Theo

trực quan đại lý người dùng của W3C Recommendation for TH, thường làm cho các yếu tố TH theo chiều dọc và chiều ngang trung trong tế bào và với trọng lượng phông chữ đậm.

Không có nhắc đến như thế nào nó phải cư xử (?) Hay không thì phải kế thừa phong cách từ cha mẹ?

kiện là:

  • Theo mặc định tất cả các trình duyệt tập trung sắp xếp văn bản trong TH phần tử.

  • Internet   Explorer thấp hơn, Firefox, Chrome, Safari và Opera cài đặt (chỉ ) text-align tài sản của TH để kế thừa từ cha mẹ <thead>, <table>, <body> và do đó trên.

  • Internet Explorer 8 và sau đó không cho phép TH kế thừa thuộc tính văn bản căn chỉnh từ cha mẹ. Bạn phải nhắm mục tiêu thẻ TH thông qua bộ chọn CSS để thay đổi giá trị của nó.

  • Tất cả trình duyệt đều không kế thừa thuộc tính phông chữ trọng lượng từ cha mẹ. Bạn phải nhắm mục tiêu thẻ TH thông qua bộ chọn CSS để thay đổi giá trị của nó.

Nhìn vào bức ảnh này, chúng tôi không thể khái quát trình duyệt nào đang làm đúng công việc. Hoặc là không cho phép cả hai text-alignfont-weight kế thừa giá trị (Internet Explorer     8 và cách sau) hoặc "cho phép một và thả khác" (phi Internet Explorer     8 + chiều) là tốt hơn ; nó theo quyết định của nhà cung cấp.

Là một nhà thiết kế, một nguyên tắc chung là chúng ta phải chọn những thực hành phù hợp với tất cả các trình duyệt.Trong trường hợp này, luôn nhắm mục tiêu TH để thay đổi giá trị của văn bản căn chỉnhphông chữ trọng số.

+0

"Bạn phải nhắm mục tiêu thẻ TH thông qua bộ chọn CSS để thay đổi giá trị của nó" ... Điều này đã hiệu quả. Cảm ơn. –

2

Mặc dù câu trả lời của @ vulcanraven về cơ bản là chính xác khi được đăng, tình hình đã thay đổi. Đặc tả HTML hiện tại HTML5 mô tả "hiển thị dự kiến", không bắt buộc nhưng có thể được coi là được khuyến nghị ngầm định và các nhà cung cấp trình duyệt có thể, nếu muốn, yêu cầu sự phù hợp với nó. Các quy tắc "hiển thị dự kiến" cho th bao gồm:

"Biểu định kiểu tác nhân người dùng khớp với các phần tử thứ có nút cha có giá trị được tính cho thuộc tính 'căn chỉnh văn bản' là giá trị ban đầu của nó, có khối khai báo chỉ bao gồm một khai báo đơn đặt thuộc tính 'văn bản căn chỉnh' thành giá trị 'trung tâm'. ”

Đó là một cách khá phức tạp để nói rằng các phần tử được căn giữa theo mặc định. (Nó cũng lạ, bởi vì CSS không có cách nào đề cập đến giá trị tính toán cho một thuộc tính theo cách đó.) Nhưng nó thực sự nói rằng điều này được dự kiến ​​chỉ áp dụng nếu phụ huynh, cụ thể là phần tử tr, không có text-align được đặt thành khác với left.

Tuy nhiên, nhiều trình duyệt hiện đại không thực hiện được điều này. Trong Chrome và Firefox, các ô được căn trái. Nếu bạn thử nghiệm với một bảng đơn giản không có thuộc tính CSS hoặc presentational và kiểm tra nó bằng cách sử dụng các công cụ dev, bạn có thể thấy rằng các ô th được căn giữa nhưng điều này không được phản ánh trong CSS; các trình duyệt này tính toán các thuộc tính theo quy tắc CSS (và không có quy tắc biểu định kiểu trình duyệt như được mô tả trong "hiển thị dự kiến"), nhưng nếu text-align không được đặt ở mức th, nó là trung tâm và text-align được hiển thị là center, như thể từ bầu trời xanh. Điều này có nghĩa là các trình duyệt đó có các quy tắc đặc biệt để xử lý “định tâm mặc định”. IE 11 dường như triển khai “hiển thị được gợi ý” và hiển thị các ô ở đây làm trung tâm, nhưng nó không hiển thị những quy tắc CSS nào được dựa trên.

Các vấn đề liên quan