Style의 display 속성을 inline , inline-block , inline-table 로 사용시 부모 노드의 너비가 적을 때 한줄로 보이는 것에 대한 브라우저별 차이

Style의 display 속성을
inline , inline-block , inline-table 로
사용시 부모 노드의 너비가 적을 때 한줄로 보이는 것에 대한 브라우저별 차이

 

IE6,7 : inline 만 지원됨
IE8 : inline-block 지원됨
FF,OPERA : inline , inline-block , inline-table 지원됨
CROME,SAFARI : inline-block , inline-table 지원됨

 


결론
기본값은 display:inline-block이고
IE6,IE7에선 IE핵으로 사용 /display:inline
결과
.xxx {display:inline-block;/display:inline;}


소스

inline
<div id="rolling_1" style="width:150px; height:100px; overflow:visible; border:4px solid gray; position:relative; white-space:nowrap">
 <table  border="0" cellpadding="0" cellspacing="0"  style="display:inline; width:100px; height:100px"><tr><td bgcolor="red">1</td></tr></table> <table  border="0" cellpadding="0" cellspacing="0"  style="display:inline;width:100px; height:100px"><tr><td bgcolor="blue">2</td></tr></table> <table  border="0" cellpadding="0" cellspacing="0"  style="display:inline;width:100px; height:100px"><tr><td bgcolor="green">3</td></tr></table>
</div>
inline-block
<div id="rolling_2" style="width:150px; height:100px; overflow:visible; border:4px solid gray; position:relative; white-space:nowrap">
<table  border="0" cellpadding="0" cellspacing="0" style="display:inline-block;width:100px; height:100px"><tr><td bgcolor="red">1</td></tr></table> <table  border="0" cellpadding="0" cellspacing="0"  style="display:inline-block;width:100px; height:100px"><tr><td bgcolor="blue">2</td></tr></table> <table  border="0" cellpadding="0" cellspacing="0"  style="display:inline-block;width:100px; height:100px"><tr><td bgcolor="green">3</td></tr></table>
</div>
inline-table
<div id="rolling_3" style="width:150px; height:100px; overflow:hidden; border:4px solid gray; position:relative; white-space:nowrap">
<table  border="0" cellpadding="0" cellspacing="0"  style="display:inline-table;width:100px; height:100px"><tr><td bgcolor="red">1</td></tr></table><table  border="0" cellpadding="0" cellspacing="0"  style="display:inline-table;width:100px; height:100px"><tr><td bgcolor="blue">2</td></tr></table><table  border="0" cellpadding="0" cellspacing="0"  style="display:inline-table;width:100px; height:100px"><tr><td bgcolor="green">3</td></tr></table>
</div>


inline
1
2
3
inline-block
1
2
3
inline-table
1
2
3
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📅 달력형