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

以下是根据Microsoft使用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; }
}

我的css代码有什么问题

2 个答案: