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

こんにちはfloat:left; 、あなたの#content id

このように

   #content{
    float:left;
    }

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

または定義する

#content{
display:block;
}
于 2012-10-31T09:17:15.530 に答える
1

幅が 980px 未満の場合にのみ適用される CSS ルールがあり、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、ブロック レベルの要素になり ( float が適用されたときの css 表示プロパティを参照)、背景色が適用されます。

ただし、ウィンドウが 980px より小さい場合#content、計算されたスタイルは

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

したがって、背景#contentは表示されdisplay:inlineません - 「display: inline を使用している場合、背景色が表示されないのはなぜですか? 」を参照してください。

@media screen and (max-width: 980px) .grid, .grid-rightルールを削除すると問題は解決しますが、これは複数の解像度とウィンドウ サイズに合わせてコンテンツをスケーリングおよび適合させるレスポンシブサイトの一部として存在すると考えられます。低解像度で必要な動作を確認することをお勧めします。いずれにしても、ウィンドウが 980px 未満の場合は or を指定すると問題が解決し#contentますdisplay:block。float:left

于 2012-10-31T09:47:32.420 に答える
0

で動作します

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

それも。（フロートを外したところ：左）

于 2012-10-31T09:23:00.407 に答える