쉽게 놓칠수 있는 CSS Issue 이슈 해결

1. ie8~10 빈 공간의 a태그 활성화 안되는 문제

<a href="#">
<i>블라블라</i>
</a>

-> 위와 같은 구문은 IE(인터넷 익스플로러)에서 <a> 태그가 빈공간으로 인식하여 해당 영역이 활성화되지 못한다.

따라서 두가지 해결방법이 있다.

1. <a>태그 안에 <img>태그를 넣어 영역을 채워준다.

2. css에서 background image 를 사용하여 사이즈를 100% 주어 영역을 채워준다.

2. IE8에서 input 실행안되는 이슈

input[type=""]에서 input 숨기는 css에

visibility: hidden을 사용하게 되면 IE8에서 인식을 하지 못한다.

input[type=""] {
position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

3. 포지션을 이용한 위치이동

margin-left: -n px를 이용하면 해당 엘리먼트 전체 영역 크기가 깨지는 이슈가 발생할 수도 있으므로, 

position: relative, left: -n px로 조절하는 것이 좋다.

4. 모바일 rem, % 크기 조절

1. rem은 미디어쿼리를 통해 해상도에 따른 px크기에 따라 값이 닫라져서 해당 해상도의 px 간격이 발생할 때 값을 못 불러와 틀어질 수도 있다. 

2. 한 영역 안에서(div같은) 단위사용시 rem, % 중 한가지 단위로만 통일성 있게 사용하는 것이 좋다.

3. height를 %로 주고 싶을땐 height: n %가 아닌, padding-bottom= n %로 지정하면 된다. (image엘리먼트 사용시 유용)

▶ (높이/가로)*100 을 하면 %값 확인 가능

5. dt, dd

한줄 적용에 display: inline-block;을 사용했을 경우 각각 width값을 지정해주어야 이슈가 안생긴다.

6. 모바일 스플라이트 탭

높이값이 홀수면 background: 100% 200%의 소수점이 생기므로 빈공간이 생겨 라인이 새로 나올 수도 있다. 짝수값이 되게 진행해야한다.

7. 모바일 background처리

background를 body나 viewport에 넣게 되면 아이폰에선 인풋박스에 포커스할시, 해당 배경 이미지가 날라가게 된다. 그러므로 따로 viewport 밖으로 빼서 div를 생성하여 해당 div에 배경이미지를 넣고 fixed로 고정시켜준다. (background-position: center top, 사이즈 조절 필요)

8. IE8~9 Placeholder 적용X

플러그인 사용 필요

REPO

https://github.com/mathiasbynens/jquery-placeholder

DEMO

Demo & Examples

9. css 차일드 속성

nth-of-type(n) : 해당 class명의 타입순서요소

nth-child(n) : html 코딩 순서에 따른 요소

10. IE8 이슈

1. input[type="text"]에 높이를 주지말고 위아래 padding값을 주어 높이를 맞춰줘야한다. 

다른브라우저에선 기본 높이 가운데정렬이 되지만 ie8에서는 안되기 때문.

2. display:block으로 margin:0 auto한것은 width값을 주어야 가운데 정렬이 됨.

11. z-index 이슈

z-index는 position(relative, fixed 등) 값이 부여되어야 먹힌다. 

또한 부모의 z-index 값의 영향을 받기 때문에 수치 조정에 유의해야할 부분.