我的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; } 
}