ie7 li 주위로 3px정도 공간이 생기는 버그

크로스브라우징 2010. 8. 4. 13:30

1. li안에서 3px 정도 공간이 생기는 버그

li는  height:13px 값을 가지고 있다. 그런데 이미지나 텍스트 위에 ie7에서만 3px정도 되는 공간이 생기면서 주저앉았다.
기본을 line-height:1.5em를 가지고 있었기에 혹시나 해서 line-height값을 13px 주어보았다. 이게 문제였음....

<ul>
<li>이미지 혹은 텍스트</li>
<li>이미지 혹은 텍스트</li>
</ul>

2. li와 li 사이에 3px 정도 공간이 생기는 버그

li 안에 바로 ul 이나 dl 이 나올경우 font-size 때문에 공간버그가 생길수 있다.

line-height 으로 해결이 되지 않을 경우 font-size:0 으로 해결 가능하다.

'크로스브라우징' 카테고리의 다른 글

ie HTML5 에서 border-radius 사용제한  (0) 2011.04.07
CSS Hack 1  (0) 2010.12.14
min-height  (0) 2010.07.10
ie6 position 버그  (0) 2010.07.09
ie 랜더링 문제  (0) 2010.05.14
:

min-height

크로스브라우징 2010. 7. 10. 17:50

1. 핵을 사용한다. 

.minheight_ex {   min-height:550px; } /*표준용*/

*html .minheight_ex {height:550px;} /*익스용*/

 

2. 핵을 사용하지 않는다.

.minheight_ex {
  min-height:550px;
  height:auto !important;
  height:550px;
}

이번 프로젝트엔 유난히 둥근이미지박스가 많았다.
가변성과 이미지사용을 따지자면 코너 4개를 이미지로 돌리는게 좋긴 하지만 불필요한 태그가 너무 많이 들어간다. 또 ie6에서 position 버그도 있기 때문에 그다지 사용하지 않았었는데 이번엔 둥근모서리박스가 너무 많이 나와서 스타일을 통일해버렸다.
그때 정말 유용하게 썼던게 바로 핵을 사용하지 않고 쓸 수 있는 height값 이다. position버그로 인해 가로세로 값을 지정해주어야 했기 때문이다.

................./* table min-height 적용 불가 */

'크로스브라우징' 카테고리의 다른 글

CSS Hack 1  (0) 2010.12.14
ie7 li 주위로 3px정도 공간이 생기는 버그  (0) 2010.08.04
ie6 position 버그  (0) 2010.07.09
ie 랜더링 문제  (0) 2010.05.14
브라우저별 테이블 height 값으로 본 픽셀 테스트  (0) 2010.04.21
:

ie6 position 버그

크로스브라우징 2010. 7. 9. 18:31

높이값이 홀수일 경우 position 버그가 있다. 위치를 잘 잡지 못하고 아무데나 퍼져 버리는것.

이미지 역시 짝수로 넣어주도록 하자.
: