HTML buộc kích thước img yêu cầu chặn?

Question

Tôi có một tình huống mà tôi muốn một HTML img chưa được tải để có chiều cao được đặt trước. Lý do là chiều cao này sẽ được sử dụng trong một phép tính có thể kích hoạt trước khi hình ảnh được tải đầy đủ và cần phải chính xác. Tôi thử như sau:

<div>hello<img src='http://example.com/invalid.gif' class="testimage"> there</div> 

và đưa vào một số css

.testimage { 
    height: 200px; 
    width: 200px; 
} 
​ 

và ít nhất trong Firefox 5, thêm không gian không được trả lại (và kỳ quặc, hình ảnh bị hỏng không hiển thị một trong hai, chỉ là một khoảng trống). Tức là, cho đến khi tôi thêm display: inline-block. Trong ít nhất một số trình duyệt khác, màn hình mặc định của inline sẽ tạo ra kết quả mong muốn. Đây có phải là dự kiến ​​không? Nếu vậy, tại sao?

Dưới đây là một jsFiddle cũng như: http://jsfiddle.net/uYXD4/

Answer 1

hình ảnh là replaced elements:

Một yếu tố có nội dung bên ngoài phạm vi của mô hình định dạng CSS, chẳng hạn như hình ảnh, tài liệu được nhúng hoặc applet. Ví dụ: nội dung của phần tử HTML IMG thường được thay thế bằng hình ảnh mà thuộc tính "src" của nó chỉ định.

Đối với các phần tử được thay thế, display: inline-block là supposed to have the same exact same efffect là display: inline, là mặc định.

Vì vậy, đây có thể là một lời giải thích có thể cho rằng hành vi kỳ lạ trong một số trình duyệt *:

Họ đối xử với chỉ nạp hoàn toàn hình ảnh như thay thế các yếu tố, và nếu không đối xử với họ như yếu tố phi thay thế. Điều đó có ý nghĩa sau khi tất cả, và tiêu chuẩn không rõ ràng không cho phép điều đó.Do đó, có 3 kịch bản có thể:

1. thay thế phần tử, inline hoặc inline-block không quan trọng, height sở hữu các công trình
2. inline không thay thế phần tử, height thuộc tính has no effect
3. inline-block không phần tử được sắp xếp, height thuộc tính tài sản

Hình ảnh được tải luôn đủ điều kiện là 1. hoặc 2. nếu bạn đặt hiển thị: inline-block một cách rõ ràng)

* Không chắc đó có phải là cách mọi thứ hoạt động không.

Answer 2

nó nói ở đây là hình ảnh được inline yếu tố - http://htmlhelp.com/reference/html40/special/img.html

Mặt khác hãy xem ở đây - Is <img> element block level or inline level?

Dường như <img> phần tử là loại nội tuyến và khối. Không có quy tắc nghiêm ngặt xác định nó, vì vậy có lẽ các nhà cung cấp trình duyệt đưa ra quyết định riêng của họ về các giá trị mặc định. Vì vậy, đặt cược tốt nhất của bạn là để thiết lập lại các giả định của họ để display: inline-block

Answer 3

Tại sao không sử dụng một cái gì đó giống như

<img src="..." width=400 height=200> 

tôi đang làm điều tương tự và nó hoạt động khá tốt. Một lựa chọn khác là ...

$('.myimg').load(function() { /* ops */ }); 

mặc dù tôi không biết nếu mà chờ đợi để tải hình ảnh trên mọi trình duyệt hay không