[Vue.js] Vue를 적용하니 IE11에서 하얀화면(blank)으로 나올때3


3탄이 돌아왔습니다~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~……..(((((¬ ̄▽ ̄)¬♪

혹시나 다른이유때문에 안나오는것같으면 앞의 1,2편도 참고해주세요

Vue를 적용하니 IE11에서 하얀화면(blank)으로 나올때 1편

Vue를 적용하니 IE11에서 하얀화면(blank)으로 나올때 2편

원하지않지만………..어쩔수없죠 서비스제공해야하는 사람입장이면..

사용자에게 어떤 브라우저를 사용하라고 할수는 없으니깐요….

근데…IE쓰는사람들 좀 갈아타주시면 안되나요…. 진심으루…

여튼 1,2편으로다가 다 해결을 했는데도 또 blank인경우가 있어요

미친거죠 이건

어떻게 할수가 없어서 팀장님이랑 같이 git 풀리퀘를 하나씩 뒤져가면서 버전별로 다운받아가면서

도대체 어디서부터 IE에서 안뜨기 시작한건가

디버깅이라 읽고 끝없는 삽질이라 부르는걸 시작했어요^^……ㅎ……………….

결국에는 IE가 뜨는 지점과 안뜨는 지점을 발견했고.. 그때 file changed된것들만 디버깅하는 과정을 거쳐서

드디어 발견했습니다 하하하하하하핳ヽ(・∀・)ノ ♪

그날 file change해서 올린것만 200파일이 넘었는데^^……

분명 다른 프레임워크에도 똑같은 에러가 날거라고는 생각하는데, 우선 vue에서

스타일을 바인딩할때, 똑같은 속성이 들어있으면 IE에서는 아예 그냥 blank를 리턴합니다.

이 사실을 모른채로 여태 삽질을 삽질을.. 그런삽질을….

렌더링이 아예 안되니 app에 찍어주지를 않아요.

그래서 그냥 blank로 나옵니다.

저게 무슨 말이냐면, 예를 들어서

<div v-else :style="{backgroundColor:'#338a2e', padding: '1px 0px 1px 0px',color:'#ffffff',border:'1px solid #338a2e'}">

이런코드가 있다고 합니다.

저div에 적용되는 속성은 backgroundColor, padding, color, border 이렇게 4가지인데,

예를들어 실수로 제가 color를 한번 더 썼다고 해봅시다. (실제로 그랬음)

그럼 IE에서 안나온다는거죠……..

근데 이걸 어떻게 아냐고요 디버깅을 안해보면…..디버깅하고나서 알았어요.

IE는 스타일 영향을 참 많이 받는다는걸..

그냥style은 저정도로 안먹을텐데 스타일바인딩을 해버리니 저렇게 예민하게 구십니다..

실수라도 ctrl+c,v 잘하시길바라요.

전 복붙하다가 저 사단이 났어요….흑흑

여튼 혹여 vue가 설정을 다 해줬는데도 blank뜨는 분들은 style이 바인딩이 뭔가 겹치는게 없나 한번 잘 봐보세요…

ie와 싸우시는 모든 분들 힘내세요…..ε=(・д・`*)…




© 2018. by sora

Powered by sora