IE7 không hiểu hiển thị: block-inline

127

Ai đó có thể vui lòng giúp tôi có được đầu của tôi xung quanh lỗi này? Với Firefox, nó hoạt động tốt nhưng với Internet Explorer 7 thì không. Có vẻ như không hiểu display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

css:

.frame-header {
    height:25px;
    display:inline-block;   
}

html internet-explorer-7 css

— từ thiện
nguồn

1

Chính xác những gì để bạn đạt được? Có tác dụng gì?

— Iladarsda

302

Bản display: inline-block;hack IE7 như sau:

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

Theo mặc định, IE7 chỉ hỗ trợ các phần tử inline-blocktự nhiên inline( Bảng tương thích Quirksmode ), vì vậy bạn chỉ cần hack này cho các phần tử khác.

zoom: 1ở đó để kích hoạt hasLayouthành vi, và chúng tôi sử dụng các ngôi sao sở hữu Hack để cài đặt các displayđể inlinechỉ trong IE7 và thấp hơn (trình duyệt mới hơn sẽ không áp dụng đó). hasLayoutvà inlinecùng nhau về cơ bản sẽ kích hoạt inline-blockhành vi trong IE7, vì vậy chúng tôi rất vui.

CSS này sẽ không xác thực và có thể làm cho biểu định kiểu của bạn bị rối, dù vậy, sử dụng biểu định kiểu chỉ dành cho IE7 thông qua các nhận xét có điều kiện có thể là một ý tưởng hay.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

— kapa
nguồn

40

Tôi thích *zoom:1;triger hasLayout. Vì vậy, rõ ràng hơn rằng *zoomvà *displayđi cùng nhau

— yunzen

4

@RoshanWijesena w3schools không liên quan gì đến w3c và cũng không phải là nhà chức trách trên eg7

— Musa

1

@RoshanWijesena w3schools không phải là một tài nguyên tốt và hoàn toàn không chính thức. Đừng phụ thuộc vào nó. Việc họ đề cập hoặc không đề cập đến một cái gì đó không thực sự có ý nghĩa gì.

— kapa

1

cảm ơn các bạn! Vì vậy, những gì tôi nên sử dụng như một tài liệu chính thức chỉ cần tự hỏi!

— Roshan Wijesena

2

@RoshanWijesena Bạn có thể tìm thấy thông số kỹ thuật tiêu chuẩn chính thức trên w3.org , trang chính thức của W3C. developer.mozilla.org là một tài nguyên tuyệt vời mà bạn có thể sử dụng thay vì w3schools làm tài liệu tham khảo.

— kapa

8

Cập nhật

Vì không ai sử dụng IE6 và 7 nữa nên tôi sẽ trình bày một giải pháp khác:
Bạn không cần hack nữa, vì IE8 tự hỗ trợ nó.

Đối với những người phải hỗ trợ các trình duyệt thời đồ đá trước IE8 (Không phải IE8 cũ, quá hay ho ):
Đối với tài khoản kiểm soát phiên bản IE, hãy sử dụng một số Lớp có điều kiện trong <html>thẻ như các quốc gia Paul Irish trong bài viết của mình

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

Bằng cách này, bạn sẽ có các lớp khác nhau trong thẻ html cho các Trình duyệt IE khác nhau

CSS bạn cần như sau

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

Điều này sẽ xác thực và bạn không cần thêm tệp CSS

Câu trả lời cũ

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}

— yunzen
nguồn

CSS bạn hiển thị ở trên có ý nghĩa nhưng chính xác thì nó sẽ hoạt động như thế nào trong HTML? Cảm ơn.

— StephenESC

@StephenESC hai cách. Thêm lớp inline-blockvàoframe-header phần tử. Hoặc thay đổi inline-blockbằng cách frame-headerchọn CSS.

— yunzen

1

IE7 không hỗ trợ 'block-inline' đúng cách, thông tin thêm ở đây: LINK
Sử dụng có thể sử dụng: 'inline' thay thế.

Chính xác là bạn đang cố đạt được điều gì? Làm cho chúng tôi một ví dụ và đặt ở đây: http://jsfiddle.net/

— Iladarsda
nguồn

0

sử dụng nội tuyến, nó hoạt động với loại bộ chọn này cho các mục danh sách:

ul li {}

hoặc cụ thể:

ul[className or name of ID] li[className or name of ID] {}

— Trung
nguồn

2

inlinekhông giống như inline-block. Ví dụ, height: 25px;trong ví dụ sẽ không có hiệu lực khi phần tử là inline. Ngoài ra, câu hỏi không nói gì về danh sách.

— kapa