쪽빛하늘

IE8에서 빈 텍스트 노드가 생성되어 공간을 차지하면서 점(.)이 보여지는 버그가 생겼다.

빈 텍스트 노드가 생기는 이전 객체에 div를 이용하여 style을 줘서 해결했다.

만일 input 뒤에 빈텍스트 노드가 생겼다면 아래와 같이 해결했다.

IE8과 chrome에서 px로 사이즈를 잡아서 배치를 하면 일치하지 않는 경우가 존재한다.

나의 경우 chrome에서는 top:10px; 가 적당한데, IE8에서는 top:3px; 가 적당한 값이었다.

적정선에서 타협할 수 있는 차이면 괜찮겠지만 너무 눈에 딱 보이는 부분이라 따로 적용을 할 수 밖에 없었다.

class명이 .basic-btn 일 경우 아래와 같이 적용하면 IE8의 top은 3px, 그 외의 브라우저에는 10px로 적용할 수 있다.

원하는 속성 뒤에 '\0/ !important'를 붙여주면 간단히 해결 할 수 있다.

script에서 작성한 내용 중

$('#id').val().trim(); 

해당 부분이 IE8에서 작동이 되지 않는 것을 확인했다 문제는 다름아닌 trim()

IE8 이하 버전에서는 trim()이 사용이 되지 않는다.

trim()을 사용하기 위한 방법을 찾아보니 두가지 방법이 나왔다.

첫번째 방법은 javascript를 이용하여 사용하는 방법으로 아래와 같이 함수형식으로 사용하는 것이다.

두번째 방법은 jQuery를 이용한 방법으로, 기존 소스에서 jQuery를 사용하고 있었기에 개인적으로 아래와 같은 방법을 이용하여 변경하였다.