archuive

IE에서 input을 사용할 때 주의해야할 것이 있다. 바로 원치 않는 input field 초기화 버튼이 자동으로 생성된다는 점이다. 이를 해결하기 위해 아래와 같은 스타일을 추가해준다. input[type=text]::-ms-clear { display: none; }CSS reset 등에 미리 추가해두면 유용하게 처리할 수 있을듯! AS-IS input을 활성화하면 갑자기 input이 가로로 넓어지며 디자인에 맞지않는 엑스 버튼이 튀어나온다 TO-BE 위 스타일 적용 후, 깔끔해진 input 태그 😌 📖 참고 자료 Stack overflow: Remove IE10's “clear field” X button on certain inputs?

border-collapse CSS 속성은 표 테두리(border)가 분리(separated) 또는 겹침 혹은 상쇄(collapsed)될 지를 결정한다. 분리 될 경우, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유한다. border-spacing 속성 없이도 각 셀에 스타일링한 테두리가 제대로 출력될 수 있어서 매우 소중한 속성이지만, 이 속성은 역시 IE에서는 골칫덩어리였다. 아래 이미지와 같이 border-spacing: collapse 를 선언하는 순간 IE11 버전에서 테두리가 간헐적으로 사라지는 것을 발견했다. 이 경우 border-spacing 속성의 기본 값인 border-spacing: separate로 값을 바꿔주면 원하..

caniuse.com 에서 Flex를 검색하면 아래와 같은 내용을 확인할 수 있다. 거의 대부분의 브라우저에서 지원 가능하고 심지어 IE도 10과 11에서 부분 지원 되고 있다! 그치만... Notes 탭의 4번 항목을 보면 아래와 같은 말이 써있다. Partial support is due to large amount of bugs present (see known issues) 엄청난 양의 버그가 있어서 부분적으로 지원한다는 멘트. Known issues탭을 확인 해보면 이미 알려진 이슈들을 확인할 수 있다. Safari 10 이하 버전에서는 min/max width/height 선언을 사용하여 플렉스 아이템을 렌더링 하지만 멀티 라인 플렉스 컨테이너의 한 줄에 있어야 하는 항목 수를 계산할 때는 이..

IE 크로스브라우징시 디자인이 깨지는 현상의 많은 경우CSS의 initial 값을 사용했을 때 발생했다. initial은 부모요소가 주는 모든 상속값을 건너뛰어 CSS 초기값을 되돌리는데 사용한다. 하지만! Internet Explorer은 이 값을 지원하지 않는다. 이를 해결하기 위해 initial대신 속성의 초기값이나, 초기화 혹은 없애는 값을 사용하는것을 권장하며 자주 사용하는 속성의 초기값은 아래와 같다. position: static overflow: visible line-height: normal color: transparent border: none 혹은 0 width, height 등 수치값 은 auto 초기 값이 없는 경우, 가장 가까운 부모로부터 상속받을 수 있도록 inherit 를..