5

该网页是网站链接。如果减小窗口大小，透明灰色background消失。我尝试了很多方法来解决这个问题，但没有成功。有任何想法吗？我使用的 CSS 是：

  #content {
    margin-bottom: 20px;
    padding-left: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    overflow:auto;
}
4

3 回答 3

1

有一条 CSS 规则仅在宽度小于 980px 时应用，即添加float:left. 这导致背景消失。

@media screen and (max-width: 980px) .grid, .grid-right {
    float:none;
}

当窗口大于 980px 时，#content计算样式为

float:left;
display:block;
width: <not auto but some real px value>;

由以下规则组成

.grid {
    float: left;
    margin-bottom: 2.127659574468%;
    padding-top: 0;
}
.col-860 {
    display: inline;
    margin-right: 2.127659574468%;
}

具有float:left覆盖display:inline并因此#content成为块级元素（请参阅应用浮动时的 css 显示属性）并且将应用背景颜色。

但是，当窗口小于 980px 时，#content计算样式为

float:none;
display:inline;
width:auto;

因此#content是display:inline并且背景不会出现 - 请参阅如果我有 display: inline，为什么我的背景颜色不显示？

删除该@media screen and (max-width: 980px) .grid, .grid-right规则将解决问题，但我认为这作为响应式站点的一部分存在，可将内容缩放并适合多种分辨率和窗口大小。我建议检查在较低分辨率下需要什么行为。无论哪种方式，在窗口小于 980 像素的情况下给出或将解决#content问题display:block。float:left

于 2012-10-31T09:47:32.420 回答
1

Hi now define to float:left; in your #content id

as like this 

   #content{
    float:left;
    }

--------------

or define 

#content{
display:block;
}
于 2012-10-31T09:17:15.530 回答
0

它适用于

.grid{
  position: absolute;
  left: 0;
  /* ... */
}

也。（删除浮动：左）

于 2012-10-31T09:23:00.407 回答