CHỈ Firefox hoạt động lạ với phần tử chặn nội tuyến

Question

Tôi đã chơi với lưới css đáp ứng gần đây nên tôi đã cố gắng tạo một trong những dự án mới của riêng mình. Tôi quyết định giữ nó khá đơn giản vì vậy tôi sử dụng tài sản display:inline-block cho các tế bào của tôi.

Điều này có thể yêu cầu margin:-0.25em "hack" hoặc xóa khoảng trắng giữa các phần tử inline-block để truy cập phần tử cuối cùng bỏ qua một dòng mới.

Tôi đã quyết định xóa khoảng trắng giữa các cột. Nó hoạt động tuyệt vời ngay cả trong IE8, nhưng vì một số lý do Firefox mới nhất hoạt động như thể có khoảng trắng ở giữa.

Chỉ giải thích tôi có thể nghĩ ngay bây giờ là Firefox định dạng lại mã HTML trước khi hiển thị và trong quá trình đó thêm new line sau mỗi thẻ đóng </div>.

Dưới đây là tôi JS Fiddle

Cảm ơn trước!

[ĐÁP] Tôi đã quên đặt firefox tiền tố cho box-sizing, và đệm mà phục vụ như là khoảng cách giữa các cột bằng nội dung dư thừa vì lý do đó.

nó được cố định bằng cách thêm: -moz-box-sizing: border-box; đến col yếu tố.

Answer 1

Sau khi không sử dụng mã của bạn, vấn đề là padding 10px. Nếu bạn loại bỏ dòng đó Firefox hiển thị giống với chrome (tôi đã không kiểm tra trong IE).

Thực sự nó có thể là sự giám sát trên phần của firefox. Tôi sẽ không lo lắng quá nhiều về nó, vì trang của bạn vẫn có thể đọc được, mặc dù hơi xấu xí.

Đề xuất của tôi nếu bạn có khuynh hướng sửa chữa nó là để di chuyển các ô "thủ công" bằng cách điều chỉnh các vị trí tương đối của chúng.

Answer 2

Hãy thử vertical-align: top với display: inline-block

Answer 3

Bất kỳ css-lưới (Pure CSS ví dụ) có sử dụng inline-block như phong cách hiển thị của nó, cần một yếu tố (thường là một div) như an con ngay lập tức của phần tử lưới của bạn mà trên đó bạn tiêm đệm của bạn. Xem ví dụ pseudo-code dưới đây (lưu ý đây là cú pháp lưới hư cấu):

... 
<style> 
    .inner-wrap { 
     padding: 1em; 
    } 
</style> 
... 
<div class="grid-one-third"> 
    <div class="inner-wrap"> 
    </div> 
</div> 

Trong ví dụ trên áp dụng đệm trực tiếp đến "lưới một phần ba" sẽ phá vỡ bố cục của bạn. Áp dụng nó vào "bên trong bọc" mặc dù sẽ thực hiện kết quả mong muốn của bạn, mà không cần một cái gì đó như hộp số : border-box, mà tôi xem nó như là một giải pháp hack cho vấn đề trong trường hợp này.