CSS - Lợi nhuận là một điều xấu?

Question

Tôi nhận thấy rằng một số trình duyệt gặp sự cố với lề, đặc biệt khi phần tử được thả nổi. Ví dụ, trang web này tôi đang làm tốt trong Firefox, nhưng IE7 vít lên lề hoàn toàn có vẻ như. Tôi cũng testet nó trên một số trình duyệt Linux là tốt và một số trong những sai lầm tương tự.

Các trang web là http://w3box.com/mat

này có vẻ tốt đẹp trong FF3.0 như xa như tôi có thể nói. Chưa thấy nó trong FF2, hoặc IE6. Tại sao điều này xảy ra? Có phải vì tôi đã có các DIV trôi nổi với các biên được chỉ định không?

Có một số điều tôi nên tránh hoặc nên thực hiện khác nhau không?

Chỉnh sửa: Vì vậy, có vẻ như các thẻ của tôi là nguồn của screwup. Tôi đã đặt hình ảnh trong đó đã không được xác định trong CSS và có nổi trên chúng, kết hợp với lề. Những điều này đã làm hỏng mọi thứ và tôi phải làm lại những thứ này.

Ngoài ra, một số nội dung đã xảy ra khi tôi sử dụng XHTML Strict thay thế :) Thanx mọi người! Tôi sẽ cố gắng sửa lỗi này theo cách riêng của mình :)

Answer 1

Kết hợp không được xấu, nhưng IE has some troubles với lề của các phần tử nổi. Mặc dù có nhiều công thức để sửa, tôi tin rằng trong trường hợp của bạn, bạn có thể sử dụng vị trí tuyệt đối thay vì float + margins (bạn không thực sự cần hành vi "nổi" khi hình ảnh được bao bọc bằng văn bản)

Answer 2

Tôi khuyên bạn nên sử dụng một số dạng CSS Framework (Blueprint CSS, 960 Grid, v.v.) vì chúng có số lượng lề, phần đệm và các phần tử HTML phổ biến khác. . Bạn sẽ thấy phát triển trình duyệt chéo dễ dàng hơn bằng cách sử dụng một khung công tác.

Answer 3

Trình duyệt khác nhau có các cách xử lý mô hình hộp khác nhau. Hầu hết thời gian các trang web được hiển thị tốt trong FF, Chrome hoặc IE8 có thể gặp sự cố trong IE6 và 7. Để khắc phục sự cố này, bạn có thể đặt tất cả lề và lề mặc định thành 0 (và điều chỉnh chúng khi cần thiết phần tử):

* {margin: 0px; padding: 0px; } // quy tắc đơn giản nhất ...

Để xem thêm về CSS reset bạn có thể xem xét: http://meyerweb.com/eric/tools/css/reset/

Và sau đó áp dụng phong cách khác nhau cho IE7 và 6 với ý kiến ​​có điều kiện.

Answer 4

Tôi không đồng ý với sử dụng một thư viện nếu bạn muốn tìm hiểu về CSS một phần của đường cong không may là tìm hiểu về cách thức các trình duyệt khác nhau phản ứng với CSS. Tôi thậm chí sẽ không đề nghị sử dụng một bản định kiểu thiết lập lại. Nếu bạn sẽ làm điều này rất nhiều, hãy học cách CSS hoạt động. Nếu bạn sử dụng một thư viện hoặc một bảng định kiểu được thiết lập mà bạn không hiểu làm thế nào bạn sẽ sửa chữa nó khi nó phá vỡ.

Answer 5

Như đã đề cập trên các câu trả lời khác, đó là cách giải thích của IE về hộp model.

Bất cứ khi nào bất cứ thứ gì được thả nổi, IE có xu hướng tăng gấp đôi lề được chỉ định. Điều này có thể được sửa với một biểu định kiểu bổ sung cho IE sử dụng conditional comments.

Xem thêm: http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 6

Không có gì sai với việc sử dụng lợi nhuận là.

Các phiên bản cũ của IE có một lỗi và chỉ một mình đó không đủ lý do để tránh sử dụng một trong các tính năng bố cục cốt lõi của CSS. Cụ thể, lỗi này xảy ra trong IE khi bạn nổi một đối tượng và cung cấp cho nó một biên độ trong cùng một hướng, ví dụ .:

.whatever { 
    float: right; 
    margin-right: 5px; 
} 

Bạn có thể đối phó với điều này một số cách khác nhau, tùy thuộc vào cách bố trí của bạn. Một cách là thêm div xung quanh hộp của bạn và sử dụng đệm trên đó để nhân rộng cùng một không gian một lề sẽ.