我的css代碼有什麼問題

Question

我需要一些幫助，我的css代碼。我的col的顏色沒有顯示出來。當我刪除某一行它的作品。

@-ms-viewport{ 
width: device-width; 
#result { font-weight: bold; text-align: center; } 
#result .error { padding: 4px; background: #ffebe8; border: 1px #eb8a71 solid; } 
#result .message { padding: 4px; background: #e8ffec; border: 1px #79ef9d solid; } 

#result #grid { width: 50%; margin: 10px 0 0; } 
#result #grid .even { background-color: #fff; } 
#result #grid .odd { background-color: #F0F0F6; } 
#result #grid .highlight { background-color: #3D3D3D; font-weight: bold; } 
#result #grid .header { background: url(../images/small.gif) no-repeat #E6EEEE right center; cursor: pointer; padding: 4px; } 
#result #grid .headerSortUp { background: url(../images/small_asc.gif) no-repeat #8DBDD8 right center; } 
#result #grid .headerSortDown { background: url(../images/small_desc.gif) no-repeat #8DBDD8 right center; } 
#result #grid .col1, #grid .col2, #grid .col3 { } 
#result #grid .col1 { width: 15%; } 
#result #grid .col2 { width: 20%; } 
#result #grid .col3 { width: 10%; } 
#result #grid .col1 img { display: block; padding: 4px; margin: 4px 0; border: 1px #efefef solid; } 
} 

當我刪除此行：

@-ms-viewport{ 
width: device-width; 

它的工作原理，但隨後該網站沒有響應。任何人都可以幫助我解決這個問題。我真的需要解決這個問題。

Answer 1

我猜你正在爲Microsoft Internet Explorer定義視口，並且你正在測試其他瀏覽器，例如chrome/firefox/mozilla。

如果是這樣的情況下，只需添加必要的視口，以及：

@-webkit-viewport 
@-moz-viewport 
@-o-viewport 

Answer 2

下面介紹如何根據微軟使用帶有媒體查詢的MS視窗標籤：

http://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx

@media [media query logic here] { 
    @-ms-viewport { 
    [viewport properties here] 
    } 
    [CSS for this layout combination here] 
} 

因此，您需要關閉視口規則，該規則只接受寬度，然後擁有所有其他規則。

@media [media query logic here] { 
    @-ms-viewport{ 
    width: device-width; 
    } 
    #result { font-weight: bold; text-align: center; } 
    #result .error { padding: 4px; background: #ffebe8; border: 1px #eb8a71 solid; } 
    #result .message { padding: 4px; background: #e8ffec; border: 1px #79ef9d solid; } 

    #result #grid { width: 50%; margin: 10px 0 0; } 
    #result #grid .even { background-color: #fff; } 
    #result #grid .odd { background-color: #F0F0F6; } 
    #result #grid .highlight { background-color: #3D3D3D; font-weight: bold; } 
    #result #grid .header { background: url(../images/small.gif) no-repeat #E6EEEE right center; cursor: pointer; padding: 4px; } 
    #result #grid .headerSortUp { background: url(../images/small_asc.gif) no-repeat #8DBDD8 right center; } 
    #result #grid .headerSortDown { background: url(../images/small_desc.gif) no-repeat #8DBDD8 right center; } 
    #result #grid .col1, #grid .col2, #grid .col3 { } 
    #result #grid .col1 { width: 15%; } 
    #result #grid .col2 { width: 20%; } 
    #result #grid .col3 { width: 10%; } 
    #result #grid .col1 img { display: block; padding: 4px; margin: 4px 0; border: 1px #efefef solid; } 
}