IE hiển thị inline khối

Vì vậy, tôi đang làm như vậyIE hiển thị inline khối

<div style='width: 200px; border: 1px solid black;'> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;'> 
    asdfasdf<br />asdf 
    </div> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;'> 
    asdfasdf<br />were 
    </div> 
</div>

Bây giờ trong Firefox và Chrome nó sẽ hiển thị tốt nhưng trong internet explorer 8 nó không. Họ có bố trí để không phải là vấn đề, và chiều rộng là đủ nhỏ để nó phù hợp trên một dòng.

Nếu tôi sử dụng khoảng thời gian thay vì nó làm việc, tuy nhiên tôi thực sự muốn konw tại sao div của không' làm việc trong IE

Nguồn

2011-07-15 csteifel

Tài liệu của bạn có khai báo loại DOCTYPE không? – BoltClock

Ý của bạn là "nó không hoạt động?" Hiệu quả mong muốn của bạn là gì? – Kyle

Ahhh ok tôi đã có HTML 4 tuyên bố kể từ khi một trang cực kỳ cũ của nó thay vì XHTML hoặc HTML5 – csteifel

Các phiên bản cũ của trình duyệt IE không hiểu inline-block cho các yếu tố ở mức khối.

Lý do tại sao inline-block hoạt động cho các yếu tố nội tuyến là bởi vì chúng đã làm như vậy để kích hoạt hasLayout. Và bố cục cho các phần tử nội tuyến hoạt động chính xác giống như một inline-block.

Vì vậy, để làm cho inline-block hoạt động với các yếu tố cấp khối, hãy đặt chúng trực tuyến và bằng cách nào đó kích hoạt hasLayout, như, sử dụng zoom: 1. Vì vậy, đối với bạn mã, có hai cách: thay đổi div s thành span s hoặc thêm hacks nội tuyến (hoặc di chuyển mã vào bảng định kiểu bên ngoài và sử dụng các nhận xét có điều kiện). Phiên bản với hacks inline sẽ trông như thế này:

<div style='width: 200px; border: 1px solid black;'> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> 
    asdfasdf<br />asdf 
    </div> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> 
    asdfasdf<br />were 
    </div> 
</div>

Nguồn

2011-10-01 21:08:37 kizu

Hacks CSS không hoạt động trên IE8 trong Win XP. – Piero

IE < 8 không thể chuyển đổi yếu tố có block theo mặc định để inline-block yếu tố. Bất kể bạn cố gắng thế nào đi chăng nữa, chúng sẽ luôn giữ nguyên block trừ khi bạn sử dụng float IIRC.

Trong ví dụ của bạn, có vẻ như bạn không cần sử dụng <div>. Nếu đúng như vậy, tại sao không sử dụng một số <span> hoặc một thành phần theo mặc định là inline. Nếu không, floating là câu trả lời.

Nguồn

2011-07-15 10:29:06 Mig

Điều này không đúng. IE8 hiểu _inline-block_ chế độ hiển thị tốt. Nhưng IE7 hoàn toàn không biết về chế độ đó. Mặc dù bạn có thể mô phỏng hành vi _inline-block_ bằng cách đặt display thành _inline_ và buộc bố trí cho phần tử đó (ví dụ như thuộc tính _zoom_). – oddy

Vì vậy, nó có. IE8 dường như hoạt động đúng với 'inline-block', tôi sẽ cập nhật câu trả lời của mình. – Mig

IE8 hoạt động tốt với khối nội tuyến cho đến khi bạn bắt đầu ẩn/hiển thị các phần tử bên trong khối nội tuyến sẽ làm cho vùng chứa cha mẹ tăng hoặc thu nhỏ. – ScubaSteve

Hãy thử điều này

<style type="text/css"> 
.one { 
    width: 200px; 
    border: 1px solid black; 
} 
.two { 
    display: -moz-inline-box; 
    display: inline-block; 
    width: 70px; 
    border: 1px solid green; 
} 
* html .two { 
    display: inline; 
} 
* + html .two { 
    display: inline; 
} 
</style> 
<div class="one"> 
    <div class="two"> 
    asdfasdf<br />asdf 
    </div> 
    <div class="two"> 
    asdfasdf<br />were 
    </div> 
</div>

Nguồn

2011-09-28 15:54:47 HerrSerker

Thay đổi kiểu doc làm việc cho IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Nguồn

2013-09-18 15:15:15 user2792101

display: inline-block; *zoom: 1; *display: inline;

bạn có thể thêm inline-block cho trình duyệt khác nhưng đối với IE bạn có thể thêm kiểu với *. nó chỉ hoạt động theo nghĩa là

Nguồn

2014-02-15 15:55:31 GeniusJRS

IE hiển thị inline khối

Trả lời

Các vấn đề liên quan