Làm cách nào để kích thước nền hoạt động trong IE?

Có cách nào để làm cho kiểu CSS background-sizehoạt động trong IE không?

Một chút muộn, nhưng điều này cũng có thể hữu ích. Có một bộ lọc IE, dành cho IE 5.5+, bạn có thể áp dụng:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

Tuy nhiên, điều này chia tỷ lệ toàn bộ hình ảnh để phù hợp với khu vực được phân bổ, vì vậy nếu bạn đang sử dụng một sprite, điều này có thể gây ra vấn đề.

Đặc điểm kỹ thuật: Bộ lọc AlphaImageLoader @microsoft

Tôi đã tạo jquery.backgroundSize.js : plugin jquery 1,5K có thể được sử dụng làm dự phòng IE8 cho các giá trị "cover" và "chứa". Có một cái nhìn vào bản demo .

Nhờ bài đăng này, css đầy đủ của tôi cho hạnh phúc trên trình duyệt là:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

Đã quá lâu kể từ khi tôi làm việc với đoạn mã này, nhưng tôi muốn thêm tính tương thích trình duyệt hơn. Tôi đã thêm nó vào CSS của mình để tương thích trình duyệt hơn:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Ngay cả sau này, nhưng điều này cũng có thể hữu ích. Có plugin jQuery-backstretch mà bạn có thể sử dụng làm polyfill cho kích thước nền: cover. Tôi đoán nó phải có thể (và khá đơn giản) để lấy thuộc tính css-background-url với jQuery và đưa nó vào plugin backstretch của jQuery. Thực hành tốt sẽ là kiểm tra hỗ trợ kích thước nền với Modernizr và sử dụng plugin này làm dự phòng.

Backstretch-plugin đã được đề cập trên SO ở đây . JQuery-backstretch-plugin-site ở đây .

Theo cách tương tự, bạn có thể tạo một plugin jQuery hoặc tập lệnh làm cho kích thước nền hoạt động trong tình huống của bạn (kích thước nền: 100%) và trong IE8-. Vì vậy, để trả lời câu hỏi của bạn: Có một cách nhưng atm không có giải pháp plug-and-play (tức là bạn phải tự thực hiện một số mã hóa).

(từ chối trách nhiệm: Tôi đã không kiểm tra kỹ lưỡng plugin backstretch nhưng nó dường như làm tương tự như kích thước nền: bìa)

Có một polyfill tốt cho điều đó: louisremi / background-size-polyfill

Để trích dẫn tài liệu:

Tải hình nềnizeize.min.htc lên trang web của bạn, cùng với .htaccess sẽ gửi loại mime theo yêu cầu của IE (chỉ dành cho Apache - được tích hợp trong nginx, nút và IIS).

Ở mọi nơi bạn sử dụng kích thước nền trong CSS của mình, hãy thêm một tham chiếu đến tệp này.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

Trong IE11 Windows 7, nó hoạt động với tôi,

background-size: 100% 100%;

bạn có thể sử dụng tệp này ( https://github.com/louisremi/background-size-polyfill Thẻ polyfill kích thước nền) cho IE8 rất đơn giản để sử dụng:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}

Tôi đã thử với đoạn script sau -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

Nó làm việc cho tôi!