IE7은 디스플레이를 이해하지 못합니다 : 인라인 블록

127

누군가이 버그를 해결하는 데 도움을 줄 수 있습니까? Firefox에서는 잘 작동하지만 Internet Explorer 7에서는 그렇지 않습니다. 를 이해하지 못하는 것 같습니다 display: inline-block;.

html :

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

CSS :

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

html internet-explorer-7 css

— 란 투옹
소스

1

정확히 무엇을 달성하기 위해? 어떤 영향?

— Iladarsda

302

IE7 display: inline-block;핵은 다음과 같습니다.

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

기본적으로 IE7은 inline-block자연 inline요소 ( Quirksmode Compatibility Table ) 만 지원 하므로 다른 요소에 대해서는이 핵만 필요합니다.

zoom: 1트리거에이 hasLayout행동, 우리는 사용 성급 숙박 시설은 해킹을 설정에 display에 inline(그것을 적용되지 않습니다 새로운 브라우저) IE7 낮은로만. hasLayout와 inline함께 기본적으로 트리거 inline-block우리는 행복하다, 그래서 IE7에서 작동합니다.

이 CSS는 유효성을 검사하지 않으며 어쨌든 스타일 시트를 엉망으로 만들 수 있으므로 조건부 주석을 통해 IE7 전용 스타일 시트를 사용하는 것이 좋습니다.

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

— 카파
소스

40

나는 *zoom:1;hasLayout을 심사 하는 것을 선호 합니다. 그것은 것을 더 명확 그래서 *zoom하고 *display함께 이동

— yunzen

4

@RoshanWijesena w3schools w3c와는 아무런 관련이 없으며 ie7의 권위도 없습니다

— Musa

1

@RoshanWijesena w3schools는 좋은 자료가 아니며 공식적인 것이 아닙니다. 그것에 의존하지 마십시오. 그들이 무언가를 언급하거나 언급하지 않는다는 것이 실제로 의미하는 것은 아닙니다.

— kapa

1

고마워 얘들 아! 그래서 궁금한 공식 문서로 무엇을 사용해야합니까!

— Roshan Wijesena

2

@RoshanWijesena 공식 표준 사양 은 W3C의 공식 페이지 인 w3.org 에서 찾을 수 있습니다 . developer.mozilla.org 는 w3schools 대신 참조로 사용할 수있는 훌륭한 자료입니다.

— kapa

8

최신 정보

아무도 IE6과 7을 사용하지 않기 때문에 더 이상 나는 다른 해결책을 제시합니다 :
IE8이 때문에, 더 이상 해킹을하지 않아도 그 자체로 지원하는

IE8 전에 그 석기 시대 브라우저 (그것은, 너무 IE8가 오래이지 않는다 지원해야하는 사람들을 위해 기침 ) :
IE 버전 관리의 부담을 일부 조건부 클래스를 사용하여 <html>태그처럼 폴 아일랜드 인 의 상태 그의 기사

<!--[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]-->

이것에 의해 당신은 다른 IE 브라우저를 위해 html-tag에 다른 클래스를 갖게 될 것입니다

필요한 CSS는 다음과 같습니다

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

이것은 유효하며 추가 CSS 파일이 필요하지 않습니다.

이전 답변

.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 */
}

— 운젠
소스

위에 표시된 CSS는 의미가 있지만 HTML에서 정확히 어떻게 작동합니까? 감사.

— StephenESC

@StephenESC 두 가지 방법이 있습니다. 클래스 inline-block를 frame-header요소에 추가하십시오 . 또는 변경 inline-block하여 frame-headerCSS의 선택자입니다.

— yunzen

1

IE7은 '인라인 차단'을 제대로 지원하지 않습니다. 자세한 내용은 여기를 참조하십시오. LINK
대신 '인라인'을 사용할 수 있습니다.

정확히 무엇을 달성하려고합니까? 우리를 예로 들어 여기에 넣으십시오 : http://jsfiddle.net/

— 일라 다스 다
소스

0

인라인을 사용하면 목록 항목에 대해 이러한 종류의 선택기와 함께 작동합니다.

ul li {}

또는 구체적으로 :

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

— 미들 케이
소스

2

inline와 동일하지 않습니다 inline-block. 예를 들어, height: 25px;예에서 요소가이면 효과가 적용되지 않습니다 inline. 또한 질문은 목록에 대해 아무 것도 말하지 않습니다.

— kapa