在ng-app應用程序中CSS媒體查詢在ie9和ie10上無法正常工作

Question

在我的AngularJS應用程序中，CSS媒體查詢僅在IE9和IE10上無法正常工作。爲小屏幕定義的媒體查詢正在全球範圍內實施。它僅在調整瀏覽器大小或檢查元素時才起作用。

在Chrome和Firefox等其他瀏覽器中沒有問題。我沒有在IE10 +瀏覽器中測試過。當我刪除AngularJS時，它在IE8 +中起作用。 這裏是我的媒體查詢：

@media (min-width: 0px) and (max-width: 767px) { 
 
    .col-sidebar{ width:100%} 
 
    .col-content{ width:100%} 
 
}

在IE10中瀏覽器的大屏幕，側邊欄顯示100％的寬度。

這裏是我的大屏幕全局CSS：

.col-sidebar{ width:30%} 
.col-content{ width:70%} 

Answer 1

您所使用的初始關鍵字which is not supported in Internet Explore。

我刪除了所有初始關鍵字，並替換爲默認值。 Jsfiddle

CSS

body { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

#header { 
    height: 116px; 
    background-color: #333; 
} 

#sidebar, #content { 
    position: absolute; 
    top: 7.2em; 
    bottom: 0; 
    overflow: auto; 
} 

#sidebar { 
    width: 392px; 
    overflow-x: hidden; 
    box-shadow: 0 0 20px rgba(0,0,0,0.3); 
    z-index: 999; 
    overflow: hidden; 
    background-color: red; 

} 
#map_canvas {background-color: green;} 
#content { 
    overflow: hidden; 
    left: 24em; 
    right: 0; 
    background-color: green; 
} 

#map_canvas { 
    height: 100%; 
} 

@media only screen and (max-width: 768px) { 
    body { 
     padding-bottom: 40px !important; 
    } 
    .box { 
     width: 100%; 
     } 
    #sidebar { 
     width: 100%; 
     overflow-x: hidden; 
     box-shadow: none; 
     z-index: auto; 
    } 

    #sidebar, #content { 
      bottom: auto; 
      position: static; 
    } 

    #content { 
     overflow: visible; 
     left: auto; 
     right: auto; 
     height: 100%; 
    } 

}