기존의 컨벤션 사이트를 CSS3 미디어쿼리를 이용한 반응형 웹사이트로 리뉴얼 하였습니다.
이제는 정말 Multi Device & One Web 시대네요.
태그 보관물: CSS3
IE9 Table 안에서 동작하지 않는 box-shadow 해결책
IE9 에서 Table 내부의 input에 box-shadow CSS가 적용되지 않는 증상을 발견했습니다.
원인은 table에 border-collapse: collapse;라는 속성이 있었는데, 이것은 흔히 CSS초기화 코드에서 볼 수 있습니다.
border-collapse: collapse; 삭제 또는 해당 input에 border-collapse: separate; 속성을 주는 방법이 있습니다.
input { box-shadow: 0px 0px 5px #3699FF; border-collapse: separate; }
여기서 포인트는 border-collapse입니다.
collapse는 테이블의 경계를 붙이고, separate는 붙어있는 경계선을 떨어트리는 역활을 하는데,
적용 후 아래와 같이 원하는 모습을 확인할 수 있었습니다.
(아래는 input:focus 에 속성을 주어 마우스 포커스가 위치할때 나옵니다. )