chiều rộng tối đa trên <img> thẻ không hoạt động trong IE8

Question

Tôi gặp sự cố lạ. Trên một trang web hiện đang xây dựng, chúng tôi có chức năng thư viện hỗ trợ plugin jQuery, Gallerific. Thư viện mở ra trong một cửa sổ phương thức. Những gì tôi cần là đặt chiều rộng tối đa của hình ảnh thành 765px. Có mũi tôi đã thiết lập chiều rộng tối đa: 765px; trong CSS của tôi. Tôi biết tôi không làm việc trong IE6 nhưng tôi không quan tâm.

Điều lạ lùng là khi tôi sử dụng hình ảnh, ví dụ: Rộng 1400px, IE8 trong chế độ xem tương thích, Firefox, Chrome, Safari và Opera, tất cả đều có kích thước hình ảnh này xuống đến 765px chiều rộng - nhưng không phải IE8! Tôi không thể hiểu tại sao điều này không hiệu quả.

Bất kỳ ai cũng có một đầu mối về những gì đang diễn ra hoặc cách tốt hơn, cách khắc phục?

Câu trả lời của bạn được đánh giá cao - Cảm ơn!

Kính trọng, Kim

Answer 1

Có thể cần sử dụng mật độ tối đa để bay? Bạn đã thử với !important?

Answer 2

Bạn đã chạy vào "Chế độ tiêu chuẩn gần như" của IE8 (được thiết kế để được chia theo cùng cách với IE7). Thêm thẻ meta:

<meta http-equiv="X-UA-Compatible" content="IE=8"> 

hoặc một lĩnh vực tiêu đề HTTP sản với cùng một giá trị nên đưa bạn vào chế độ tiêu chuẩn thích hợp. Xin lưu ý rằng thẻ meta phải xuất hiện trước bất kỳ phần tử tập lệnh hoặc kiểu nào để hoạt động chính xác.

Answer 3

IE8 yêu cầu một vùng chứa được đặt xung quanh hình ảnh, với chiều rộng hoặc được đặt thành chiều rộng tối đa bạn đang tìm kiếm hoặc đến 100% chiều rộng (dường như hoạt động tốt hơn trên div được định vị hoàn toàn). IE8 dường như hạnh phúc miễn là chiều rộng được xác định trên vùng chứa đó.

Ví dụ, bạn có thể thiết lập các div container với chiều rộng tối đa mà bạn đang tìm kiếm, trong khi thiết lập thuộc tính của tất cả các hình ảnh max-width đến 100%:

.container { width: 765px;} 
img { max-width: 100%;} 

mà buộc những hình ảnh được không quá chiều rộng của container mà chúng được tìm thấy.

Đảm bảo bạn khai báo loại tài liệu HTML5; IE không giống như các tài liệu XHTML.

Kind regards, Larry

Answer 4

Tôi chạy vào một vấn đề tương tự, dung dịch chứa không hoạt động khi bạn có hình ảnh của các kích cỡ khác nhau, nếu hình ảnh là nhỏ nó sẽ để lại rất nhiều không gian ở mặt bên của bức hình. Rõ ràng chiều cao tối đa hoạt động tốt trong IE8 tôi sẽ khuyên bạn nên sử dụng nếu bạn có thể.

Answer 5

Như được giải thích trong các câu trả lời khác, bạn cần áp dụng chiều rộng cho vùng chứa để giải quyết vấn đề này trong IE8. Đối với một giải pháp cụ thể Galleriffic, bạn có thể thêm css tương tự như sau:

a.thumb img 
{ 
    max-width: 160px; 
} 

/* IE 8 specific bug */ 
a.thumb 
{ 
    width: 160px; 
} 

Answer 6

Hey có một điều bạn có thể muốn thử (trong đó có tôi đập đầu tôi vào tường), do đó đảm bảo DOCTYPE của bạn được thiết lập đúng.

IE8 hoạt động với phiên bản HTML5, nhưng nếu nó thấp hơn thì không.

http://www.kintek.com.au/blog/ie8-max-width-max-height-and-inline-ie8-css-hacks/

Ngoài ra còn có mát hacks CSS nội tuyến bạn có thể làm mà sẽ nhắm mục tiêu nền tảng cụ thể:

width: 200px \ 9;/* ie8 và trước đó là / chiều cao: 200px \ 9;/ ie8 và trước đó */

Answer 7

Tôi chạy vào một cái gì đó tương tự với IE 8 và 9 và thấy rằng tôi gặp sự cố khác trong mã của mình đáng nói đến.

Tôi có một div có chiều rộng 100%, sau đó một div có chiều rộng tối đa là 980px.

Vì lý do nào đó, chiều rộng tối đa không được nhìn thấy và phần tử bên trong 980 div được cho là nổi phải không.

Tôi đã chạy trang thông qua trình xác thực mã W3 và nó nhận được nhận xét trước khi khai báo loại tài liệu và cho biết rằng IE sẽ ở chế độ "quirks".

Ngay sau khi tôi chuyển mà khen dưới khai báo DOCTYPE cảnh báo 'quirks' chế độ của validater ra đi và tất cả mọi thứ đã làm việc tốt trong IE 8 và 9.