2012-01-30 38 views
5

Tôi có mã sau với tài liệu chuyển tiếp nhưng khi tôi đặt nó thành đúng thì vị trí của hình ảnh sẽ thay đổi và di chuyển lên trên. Bạn có thể vui lòng giúp tôi hiểu vấn đề cơ bản và nơi tôi có thể tìm thấy danh sách các loại xung đột CSS khác giữa các loại tài liệu khác nhau.Loại tài liệu và CSS

Xin lưu ý rằng tôi biết rằng một vài thẻ HTML không có sẵn ở chế độ nghiêm ngặt nhưng tôi cụ thể về xung đột CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<body> 
<style type="text/css"> 
span.check:before { content: url("http://i41.tinypic.com/2rxea7d.png"); } 
</style> 
<table> 
<tr> 
<th>Ruby on Rails</th> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
</tr> 
<tr> 
<th>Road on Rails</th> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
</tr> 
</table> 
</body> 
</html> 
+0

Trong trình duyệt nào? – vvondra

+0

Trong FX 9.0.1 và Chrome mới nhất nhưng không chắc chắn về những người khác. –

+0

Đọc: http://www.quirksmode.org/css/quirksmode.html – zvona

Trả lời

4

Trong chế độ quirks và chế độ gần như các tiêu chuẩn hình ảnh (trong đó có nội dung inline, vì vậy được đặt ra trên cùng một dòng như ký tự chữ) là zero-height positioned at their baseline.

Bạn có thể nhận được hiệu ứng tương tự trong chế độ Chuẩn bằng cách ghép các thuộc tính vertical-align của hình ảnh được tạo hoặc đặt chúng làm display: block.

+0

Tôi đã đặt display: block ; bên dưới nội dung phù hợp nhưng nó đã không thay đổi bất cứ điều gì và sự khác biệt giữa cả hai loại tài liệu vẫn còn nguyên vẹn. –

0

Tôi hy vọng rằng việc thay đổi loại tài liệu của bạn sẽ thay đổi chế độ mà một số phiên bản trình duyệt Internet nhất định hoạt động từ chế độ chuẩn sang chế độ tương thích. Trình thám hiểm Internet (trong số những thứ khác) đã sửa chữa cách nó diễn giải mô hình hộp biên giới, nhưng có thể chuyển đổi giữa phương pháp cũ và phương thức được sửa chữa tùy thuộc vào DOCTYPE.

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