CSS: Chrome và Safari có vẻ như 'thêm' đường viền thành chiều rộng, trong khi IE, Firefox & Opera không

Question

Tôi đang cố gắng đạt được tính nhất quán giữa các trình duyệt cho trang web của mình.

Đó là về trang này: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (xin lưu ý rằng tôi thích URL này không được thực hiện thu thập thông tin cho seo-bot)

Nếu bạn xem trang này trong trình duyệt IE, Firefox hay Opera, mọi thứ đều tốt, nhưng trong Chrome và Safari các bảng là một chút ra khỏi dòng (như bạn có thể sẽ nhận thấy rõ ràng).

Điều gì có vẻ là vấn đề? Có vẻ như trong Chrome và Safari đường viền trái và phải (2px) được thêm vào chiều rộng bảng đã đặt, trong khi ở các trình duyệt khác, đường viền được coi là một phần của chiều rộng.

Các (hầu hết) CSS-dòng liên quan được những người sau đây (từ tập tin table.css, cũng có sẵn thông qua tập tin nguồn của trang):

table.uitbetaling { 
margin: 11px 18px 10px 19px; 
border: 1px solid #8ccaee; 
width: 498px; 
padding: 0; 
} 
table.uitbetaling img, table.uitbetaling td { 
margin: 0; 
border: 0; 
padding: 0; 
width: 496px; 
} 
table.uitbetaling tr { 
margin: 0; 
border: 0; 
padding: 0 1px 0 0; 
} 

Vì vậy, về cơ bản tôi đã sử dụng một Bảng- Cơ cấu tổ chức hình ảnh, như thế này: (lớp của bảng là uitbetaling)

<table> 
<tr><td><img /></td></tr> 
<tr><td><img /></td></tr> 
... 
<tr><td><img /></td></tr> 
</table> 

Nếu, ở đây, tôi đặt chiều rộng là table.uitbetaling và table.uitbetaling img, table.uitbetaling td cho cùng một giá trị (ví dụ: cả hai 496 hoặc 498), "sự cố" trong Chrome và Safari được giải quyết, tuy nhiên trong Firefox, đường viền bên phải là trống. Bởi vì biên giới phía bên phải không thể "phù hợp" được nữa. img và td phải nhỏ hơn ít nhất 2px so với table.uitbetaling để có đường viền bên phải hiển thị trong Firefox.

Có cách nào để giải quyết vấn đề này không?

Answer 1

Hãy thử:

table{border-collapse:collapse;} 

Answer 2

đoạn mã của bạn vào các yếu tố đơn giản nhất của nó và kiểm tra chúng trên mỗi trình duyệt. Khi bạn tìm thấy sự khác biệt, bạn có thể sử dụng các phương pháp phát hiện trình duyệt khác nhau để thay đổi mã một cách tinh tế cho từng trường hợp. Với điều đó nói ... nếu bạn không muốn đi điên cuồng điên cuồng, và CSS sẽ làm điều đó nhiều hơn thì bất cứ điều gì trong lập trình cho phép các điểm ảnh đi nếu bạn có thể.

Answer 3

Để được an toàn, tôi thường mở một bảng theo cách này:

<table cellspacing="0" cellpadding="0">

Đó là "cũ" HTML, nhưng ít nhất nó buộc sự liên lạc cùng các trình duyệt, và sau đó tôi áp dụng CSS khi cần thiết.

Answer 4

Tôi đã kiểm tra với Opera 11, Google Chrome 7.0.517.44 và FireFox 3.6.12 không thấy khác biệt với thiết kế trang web của bạn.

Answer 5

Bạn đã khai báo DTD (DOCTYPE) chưa?

đọc này:

http://msdn.microsoft.com/en-us/library/bb250395.aspx

Có vẻ mà các trình duyệt có nhiều cách khác nhau để hiển thị biên giới, nhưng việc khai báo DOCTYPE (mà đi ở phía trên cùng của tài liệu html) buộc họ phải tuân thủ các thực tế tiêu chuẩn, ít nhất là đối với mô hình hộp css.

Lưu ý: Tôi luôn sử dụng DTD chuyển tiếp xhtml để làm cho tài liệu của tôi tương thích nhiều nhất có thể ...

Chúc may mắn!

Answer 6

Thực hành tốt để luôn đặt table{border-collapse:collapse;} trong css và sau đó sử dụng cell-padding="0" và cell-spacing="0" trong html.

Answer 7

Ngày nay bạn nên sử dụng các loại tài liệu HTML5, nếu bạn đang gặp vấn đề về biên giới thêm tự với chiều rộng của phần tử tìm kiếm các kiểu CSS: hộp-sizing

cửa hộp - bao gồm biên giới chiều rộng/chiều cao và đệm chiều rộng/chiều cao hoặc về cơ bản là chiều rộng bạn thiết lập bao gồm các biên giới/padding

nội dung hộp - chiều rộng bạn đặt trên phần tử chỉ là khu vực nội dung, điều này không bao gồm đệm hoặc biên giới

Ngoài ra còn có padding-box mà tôi không sử dụng, thường là hai ở trên là đủ.

Đôi khi, tôi nghĩ IE8 sử dụng một kích thước hộp khác với Chrome/FF vv, đây là lý do tại sao đôi khi bạn có vấn đề. Bạn luôn có thể gỡ lỗi và kiểm tra kích thước hộp được đặt thành.

Lưu ý: nếu bạn không có DOCTYPE sau đó bạn đang ở chế độ quirks, và IE khác một cách hoang dại từ Chrome/FF trên mô hình hộp kích thước/hộp - và đó là vấn đề của bạn ngay