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}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1