수평 IE7

Question

내가 3 개 버튼으로 구성되어 다음과 같은 코드가에 (다른 형태로) 버튼을 정렬하는 방법 : 버튼이 IE7에 수직으로 정렬 내 노력에도 불구하고

<div id="button-panel"> 
    <form action="../edit/" method="GET"> 
    <input type="hidden" name="id" value="<?php echo $record->id; ?>" /> 
    <input type="submit" value="Edit" /> 
    </form> 

    <form action="" method="POST"> 
    <input type="submit" name="cancel_btn" value="Cancel" /> 
    </form> 

    <input type="button" id="boh-url-gen" value="Generate URL" onClick="generateURL();" />      
</div> <!-- button-panel --> 

합니다. 현재 다음 CSS를 적용했습니다.

#button-panel *{display:inline-block;} 

그러나 IE7에서는 작동하지 않습니다.

Answer 1

이는 단순히 display:inline-block이 IE7에서 완전히 지원되지 않기 때문입니다. Reference here.

완전히 지원하려면 요소를 부순니다.

#button-panel { 
    float:left; /* right */ 
} 

참고 요소 부동 흐름에서 걸립니다, 그래서 당신은 부모에게 overflow:auto 같은 것을 추가해야 할 수도 있습니다 - A는/widthheight이 설정되지 않은 고정하기 때문에 내용이 붕괴되는 가정.

Answer 2

IE7은 block이 기본값 인 display:inline-block을 지원하지 않습니다.

대신 display:inline은 (IE7이 너무 이상해)

그래서 당신은 IE7을 위해 스타일 시트를 만들 조건부 주석을 사용하거나 IE7 CSS는 display:inline으로, 해킹 그들을 inline-block처럼 행동한다. 예를 들어 :

*:first-child+html #button-panel { /* IE7 hack which is valid CSS */ 
    display: inline; 
} 

(IE7은 Alohci으로 this answer에서 해킹)