[IE]float, inline-block 핵*버그 (float vs inline-block)

li 에 float:left 를 사용해왔지만 운영,유지보수 하면서 display:inline-block을 사용하면서 ie버전마다 깨지는 현상이 있어 핵을 검색해보았다.

# IE 6, 7, 8에서 생기는 display:inline-block 문제

해결 : *display:inline; *zoom:1

- float (카테고리-HTML에도 설명)

<html>

#container { background:#333; padding-bottom:20px; margin-bottom:20px; *zoom:1;} //after 미지원에 대한 ie6~7핵

#container:after { content:""; clear:both; display:block; }

#content { width:500px; background:#ccc; float: left;}

#sidebar { width:300px; background:#aaa; float: left;}

<CSS>

content

</div>

sidebar

</div>

- float사용으로 부모요소에 display:block 을 사용한 경우
<방법1>

#container {*zoom:1;} //after 미지원에 대한 ie6~7핵

#container:after { content:""; clear:both; display:block; }

<방법2>
<div id="container" style="display: table">

# IE에서 생기는 float속성에 width:50% 문제

해결 : *width:49.9%

li에 inline-block했을때 생기는 문제점!

여백이 생긴다.

왠만하면 첫번째 방법을 사용하기로

여백을 없애는 방법은 두가지입니다. 첫번째 방법은 margin 값을 음수로 하는 것입니다.

li {
  display: inline;
  border: 1px solid #bcbcbc;
  padding: 10px;
  margin-right: -4px;
}

ie 7이하 rgba 해결책 (0)	2017.07.12
HTML radio buttons looks square in iphone (0)	2017.03.16
[IE] a태그 (0)	2016.12.22
[IE] clearfix 핵 (0)	2016.12.06

webflower