-
IE8 버그 : 특정 셀렉트 박스 만 마우스오버시 닫히는 버그FrontEnd/버그리포트 2015. 6. 12. 17:31
특정 셀렉트박스에서만 마우스를 올렸다가 움직이면 닫혀버리는(blur)현상이 나왔다.
원래 셀렉트박스 버그는 hover background 버그는 알고 있었는데
참고 : http://jpss.ta3ke.com/118
일단 셀렉트박스에 가상클래스(pseudo-class)부터 확인했지만 그런건 없다.
이렇게 되면 직업적 윤리에 맞게 당연히 삽질을 시작했다.
삽질기
1. 상단의 인풋 라디오를 지우면 현상이 없어진다.
=> 하지만 라디오버튼을 지울수는 없는 상황이다..
=> 이건 왜인지 모르겠다.
2. 인풋 라디오버튼의 위치가 버그셀렉트 보다 DOM구조상 위에 있으면 현상이 발생한다.
=> 아래에 다가 놓고 CSS을 수정해도 되지만 귀찮다.
=> 이것도 모르겠다.
그러다가 아래의 삽질기를 발견!
ie's select boxes closes themselves when hovering
구글의 힘을 빌어 번역해보면 , Ie8에서만, 로컬말고, 원격서버에서만 닫히는 현상이 있다.
위의 글 댓글을 보다가 자꾸 애들이 폰트페밀리로 장난질을 하길래.
IE8 에서 select에 폰트페밀리는 적용이 안된다. 라는걸 전 프로젝트에서 해봤어서 화면을 봤는데
잉? 적용이 되어있네?
그래서 CSS을 급하게 분해했다.
그런데 우리가 설정한건 나눔고딕인데, 맑은고딕이 적용되어있음을 확인.
그래도 이상한데...
하면서 font-fmaily가 적용되어있는걸 지우니...
기능이 동작...
그러는 중에 댓글 발견..
It looks like it might be a few different CSS declarations that can cause this.
I was having the same problem but no color declaration.
It turns out that it was a font-family rule.
I used a conditional comment to target IE8 and older and set the font-family to "inherit." Padding works fine, as does font-size.
그냥 짧게 줄이면 "나도 IE8 셀렉트버그가 있었는데, 컬러값 적용이 없었다. 하지만 폰트페밀리 적용이 있었어서 이제는 IE8일때만 "inherit" 로 폰트페밀리가 적용되도록한다."
라는거다.
결론
그냥 select에는 font-family적용하지 말자.