Trung tâm cá nhân
sách gpt4 ai đã đi

html - Mã Flexbox hoạt động trên mọi trình duyệt ngoại trừ Safari. Tại sao?

In lại Tác giả: Technical Little Cat Thời gian cập nhật: 2023-10-29 11:32:40 31 4
mua khóa gpt4 Nike

Các cột lưới có thẻ danh sách, tôi cần 3 cột hiển thị theo đúng thứ tự và bật chiều rộng tự động cho mỗi phần tử danh sách HTML bổ sung.

Đây là ví dụ của tôi:

 
        ul {
            lề: 0;
            đệm: 0;
            hiển thị: -webkit-flex;
            hiển thị: flex;
            -webkit-flex-wrap: gói;
            -ms-flex-wrap: gói;
            flex-wrap: gói;
            -webkit-flex-direction: cột;
            -ms-flex-direction: cột;
            flex-direction: cột;
            chiều cao: 150px;
            chiều rộng:tự động;
        }
    
        lý {
            float: bên trái;
            hiển thị: khối nội tuyến;
            list-style: không có;
            vị trí: tương đối;
            chiều cao: 50px;
            chiều rộng: 50px;
        }
    

        1
        2
        3
        4
        
  • 5

    •     6
        7
        8
        9
        
  • 10

    •     
  • 11

    •     
  • 12

    •
Đây là những gì tôi đã thử cho đến nay và nó hoạt động tốt trên tất cả các trình duyệt khác nhưng không hoạt động với Safari trừ khi tôi thêm những điều sau: hiển thị: -webkit-flex;.

Tôi muốn chuyển đổi đầu ra như thế này:

1 4 7 10
2 5 8 11
3 6 9 12

Điều quan trọng là tôi đã làm được điều này trên trình duyệt Safari nhưng cho đến nay có vẻ như tôi vẫn chưa thể sửa được lỗi này, bất kỳ sự trợ giúp nào cũng rất được trân trọng :)

Liên kết kiểm tra:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

1 Câu trả lời

Flexbox là công nghệ CSS3. Điều này có nghĩa là nó tương đối mới và một số trình duyệt không hỗ trợ đầy đủ cho thuộc tính flex.

Sau đây là tóm tắt:

  • IE 8 và 9 KHÔNGHỗ trợ flexbox. Nếu bạn muốn sử dụng thuộc tính flex trong các trình duyệt này, đừng lãng phí thời gian. polyfill hộp linh hoạtSau một thời gian sử dụng, hiệu quả không còn tốt và không còn duy trì được nữa.

  • Hỗ trợ IE 10 phiên bản trước của flexboxvà cần tiền tố nhà cung cấp .Lưu ý rằng một số thuộc tính trong thông số kỹ thuật hiện tại không được hỗ trợ trong IE10 (ví dụ: flex-phát triển,co giãn Và flex-cơ sở ).Kiểm traChỉ số bất động sản Flexbox 2012 .

  • IE 11 rất tốt nhưng vẫn có vấn đề. Nó dựa trên Tiêu chuẩn flexbox hiện tại Vui lòng tham khảo trang này TRÊNCác vấn đề đã biết Nhấn phím Tab để trả lời một số câu hỏi. Xem thêm:Thuộc tính flex không hoạt động trong IE

  • Với Chrome, Firefox và Edge, bạn có thể làm bất cứ điều gì. Bạn sẽ thấy một số lỗi nhỏ và không nhất quán, nhưng chúng thường có thể được khắc phục dễ dàng. Bạn cần phải chú ý Kích thước Flex tối thiểu ngụ ý , đôi khi gây ra sự cố về thay đổi kích thước và thanh cuộn.

  • Safari phiên bản 9 trở lên hỗ trợ thông số kỹ thuật flexbox không có tiền tố hiện tại. Tuy nhiên, các phiên bản Safari cũ hơn yêu cầu -webkit- Tiền tố. Thỉnh thoảng chiều rộng tối thiểu Và chiều rộng tối đa sẽ gây ra các vấn đề về căn chỉnh, có thể được giải quyết bằng cách uốn cong Đã giải quyết được sự tương đương. Xem thêm Các mục Flex không xếp chồng đúng cách trong Safari

Để biết đánh giá đầy đủ về hỗ trợ trình duyệt flexbox, hãy xem trang này: http://caniuse.com/#search=flex

Để nhanh chóng thêm nhiều (nhưng không nhất thiết phải là tất cả) tiền tố nhà cung cấp, hãy sử dụng Tự động thêm tiền tố Đối với Safari, hãy xem bài viết nàyĐối với một số trình tạo tiền tố không bao gồm -webkit- Tiền tố.

Để biết danh sách các lỗi flex phổ biến và giải pháp của chúng, hãy xem Flexbugs .

Ngoài ra, trên trang web này còn có:

Về html - mã Flexbox hoạt động trên mọi trình duyệt ngoại trừ Safari. Tại sao? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/35137085/

31 4 0
Bài viết được đề xuất: Tại sao trang chủ của Google lại sử dụng HTML đã lỗi thời (tức là HTML5 không hợp lệ)?
Bài viết được đề xuất: Nén file mp4 xuống kích thước nhỏ hơn
Bài viết được đề xuất: signal(SIGCHLD, SIG_DFL); có nghĩa là gì?
Bài viết được đề xuất: Ghi nhiều dòng không thành công (Quyền bị từ chối)
Công nghệ mèo con
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com