IE CSS display: inline-block Rendering vấn đề

Tôi đang gặp một vấn đề gây phiền nhiễu vẽ với IE mã của tôi làIE CSS display: inline-block Rendering vấn đề

CSS:

div { 
    display: inline-block; 
    margin-right:40px; 
    border: 1px solid; 
}

HTML:

<div>element</div> 
<div>element</div> 
<div>element</div> 
<div>element</div> 
<div>element</div>

Đây là trông như thế nào trong firefox/chrome (màn hình được mong đợi)

enter image description here

Đây là cách có vẻ trong IE

enter image description here

Tôi googled nếu IE hỗ trợ display: inline-block, và dường như nó.

Nguồn

2012-01-01 AlanFoster

Phiên bản IE? Chế độ tương thích được bật? –

Add DOCTYPE để html của bạn,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nó làm việc cho tôi sau khi tôi thêm này.

Lưu ý: trong jsFiddle, DOCTYPE được tạo tự động để nó hoạt động ở đó.

Sửa 1: Kiểm tra this để biết thêm thông tin,

Chỉnh sửa 2: Bạn có thể đọc thêm về phong cách inline-block here

Nguồn

2012-01-01 06:00:35

IE7 không hỗ trợ 'display: inline-block' trên các phần tử theo cấp độ mặc định, mà tôi khá chắc chắn là bất kể loại tài liệu được khai báo? – justis

Bạn có thể sử dụng thuộc tính hasLayout để làm cho nó hoạt động trong IE 7. Tôi sẽ chỉnh sửa bài đăng của mình với nhiều thông tin hơn. –

Giải pháp công tác

Sau đây dường như hoạt động chính xác trong:

Quirks chế độ
IE 7 Tiêu chuẩn
IE 8 Tiêu chuẩn
IE 9 Tiêu chuẩn
IE 9 Chế độ tương thích

<!DOCTYPE html> 
<html> 
<head> 
    <style> 

    DIV { 
     display: inline-block; 
     *display: inline; /* leading asterisk IS correct */ 
     margin-right:40px; 
     border: 1px solid; 
     zoom: 1; /* seems to fix drawing bug on border in IE 7 */ 
    } 

    </style> 

</head> 
<body> 
    <div>element</div> 
    <div>element</div> 
    <div>element</div> 
    <div>element</div> 
    <div>element</div> 
</body> 
</html>

Lịch sử trả lời

http://jsfiddle.net/3sK4S/

trình tốt cho tôi trong IE9 chế độ tiêu chuẩn. Không hiển thị đúng (như bạn đã mô tả) ở chế độ quirks.

Testing với IE9:

Quirks chế độ: block (không chính xác)
IE 7 Tiêu chuẩn: block (không chính xác)
IE 8 Tiêu chuẩn: inline (đúng)
IE 9 Tiêu chuẩn: nội tuyến (chính xác)
IE 9 Chế độ tương thích: nội tuyến (chính xác)

Để lừa IE7:

div { 
    display: inline-block; 
    *display: inline; /* leading asterisk IS correct */ 
    margin-right:40px; 
    border: 1px solid; 
}

Lấy từ this article. Làm việc cho tôi trong chế độ mô phỏng IE 7.

Mỗi @SKS nhận xét về loại tài liệu, tôi đã thêm giải pháp hoàn chỉnh với một loại tài liệu được chỉ định.

Nguồn

2012-01-01 05:56:09

Đó là một điều thú vị cần lưu ý. Tôi đã không nhận ra rằng nó mặc định chế độ quirks ... Đó là gây phiền nhiễu. Có cách nào để làm cho nó hoạt động trong chế độ quirks? – AlanFoster

@AlanFoster - IE7 hack tôi đã đăng dường như sửa lỗi đó: http://jsfiddle.net/3sK4S/1/ –

@AlanFoster Bạn có thể sử dụng nội dung ' 'meta trong tiêu đề của bạn để làm cho IE chạy bằng cách sử dụng công cụ hiển thị cao nhất hiện có, thay vì sử dụng chế độ tương thích, v.v. Mặc dù IE7 vẫn hoạt động theo cách bạn đang thấy, vì vậy có thể bạn sẽ vẫn muốn có hack này tại chỗ. – justis

div { 
    display: block; 
    margin-right: 40px; 
    float: left; 
    border: 1px solid; 
}

Sự cố chỉ xảy ra với IE7 trở xuống, nhưng điều này sẽ khắc phục điều đó.

Nguồn

2012-01-01 05:59:03

Demo: http://jsfiddle.net/fgywq/ Hãy thử với bất kỳ trình duyệt nào. –

Đây là giải pháp hợp pháp, nhưng có những lúc bạn không muốn nổi các phần tử. Hỗ trợ cho 'inline-block' đã giúp phát triển các layout CSS dễ dàng hơn nhiều. –

Yeah .. nhưng khi các trình duyệt như IE7 đến thì phải làm như vậy ... mặc dù thành thật mà nói công ty của tôi không kiểm tra tức là <8 .. –

-1

display: inline;

và

zoom: 1;

làm việc tốt

Nguồn

2012-04-02 11:57:49 Serkan

Có hacks CSS cho trình duyệt IE mà không làm việc, nhưng có khá một vài trong số họ:

hasLayout
```
hasLayout: true;
```
--- Rõ ràng buộc IE7 (?) hiển thị theo các quy tắc bố cục CSS cho phần tử thay vì các quy tắc toàn cầu
* dis chơi
```
*display: inline; 
zoom: 1; 
```
- Các hack sao, mà rõ ràng là "thủ thuật" rendering engine để dòng lên các div như các yếu tố inline
phao
```
float:left;
```
- Tốt phao cũ , ngay cả IE6 cũng nên hỗ trợ nó, nhưng tôi không biết tại sao bạn nên lo lắng về IE6 mặc dù số liệu thống kê trình duyệt của Trung Quốc dường như chỉ ra rằng IE6 vẫn còn khá phổ biến ở Trung Quốc, nhưng đó có thể là lịch sử như tôi đọc nó một thời gian năm ngoái. Cá nhân tôi nghĩ rằng Bắc Hàn không phải là một lo lắng, nhưng đó chỉ là tôi.

Tuy nhiên, có một cách khác để tránh tất cả những hành vi đó có lợi cho dự án mã trực tuyến trên google có tên HTML Shim hoặc Shiv. Mục đích của việc bao gồm nó là tạo tất cả các phiên bản IE trước v9 để hỗ trợ HTML5. Tôi nhận thấy rằng nó giúp và tôi không phải sử dụng tất cả các điều trên để có được inline-block để làm việc. Điều này chỉ hợp lệ nếu bạn không nhớ thêm một số JavaScript. Mặt khác, những người không có JS những ngày này?

Tất nhiên, cũng có chế độ quirks (tương thích) hoặc chế độ chuẩn, vì vậy hãy cẩn thận để thêm một loại tài liệu hợp lệ để bắt đầu.Đối với HTML5, nó đơn giản hơn:

<?DOCTYPE html>

(?) Không chắc chắn về phiên bản nào, nhưng tôi nghĩ tôi đọc 7 ở chế độ quirks.

Nguồn

2013-05-14 16:58:11

Đối với tôi làm việc thêm mã này:

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

để tiêu đề thông tin.

Nguồn

2015-10-12 06:04:31 maycza

IE CSS display: inline-block Rendering vấn đề

Trả lời

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