(UI) - SVG rendering issue under IE browser

在前端開發中，最難搞的就是Internet Explore，這我想大部分的前端工程師都同意，在這篇文章中紀錄的問題是目前手上案子，在開發中大部分使用Chrome看呈現結果，但在測試階段使用IE看時發現的問題



這個單純前端移植的案子中，我們使用bootstrap改寫整個網站，在細節部分自己刻CSS，其中網站中的圖是使用可縮放向量圖形SVG，它的優點在於不會因為縮放而讓圖形失真。

但在載入後SVG圖片後Chrome正常，IE卻沒有正常顯示，如下圖，右邊是Chrome，左邊是IE

解決方式 :

將SVG的style放置於@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)中

example:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    .sizeSVG{
        width:100%;
    }
}



Reference :
https://gist.github.com/larrybotha/7881691