1

2 つの div、1 つのコンテナー、および 2 つの異なる色を持つ 1 つの子があります。body または親 div のマージンをパーセンテージ量に変更すると、親の背景色のスライバーが端に透けて見え、親が子よりも少し大きいことを示します (子が親の幅と高さの 100% (またはそれ以上) です)。

HTML:

<div id="parent">
    <div id="child">test
    </div>
</div>

CSS:

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#parent {
width: 98%;
height: 60%;
margin: 1% auto;
position: relative;
overflow-x: hidden;
background-color: red;
}

#child {
width: 200%;
height: 100%;
background-color: #337788;
position: absolute;
left: 0;
}

jsfiddle は次のとおりです。

http://jsfiddle.net/Cd2Sd/

ブラウザーのスケーリング方法に依存するため、マージンにパーセンテージ値を使用することに関係があることはわかっています。これを回避する方法はありますか？

4

1 に答える 1

1

これで直るはず

body 
{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#parent 
{
  width: 98%;
  height: 60%;
  margin: 0px 1% 0px 1%;
  overflow: hidden;
  background-color: red;
}

#child
{
  width: 100%;
  height: 100%;
  background-color: #337788;
}

混乱を招くと思われる余分な CSS を削除しました。

また、マージンスタイルは次のようにフォーマットする必要があります

Margin: Top Left Bottom Right;

html

<div id="parent">
  <div id="child">test</div>
</div>

アップデート

代わりにこれを試してください。絶対位置と相対位置を元に戻し、CHILD スタイルを 0px のマージンにリセットしました。また、IE9 と Opera 12 の両方のブラウザで問題なく見える「アウトライン スタイル」の CSS スタイルも実装しました。

body
{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#parent 
{
  width: 98%;
  height: 60%;
  margin: 1%;
  position: relative;
  overflow: hidden;
  background-color: red;
  outline-style: none;
}

#child 
{
  width: 100%;
  height: 100%;
  background-color: #337788;
  position: absolute;
  left: 0px;
  outline-style: none;
}

Chrome をインストールしていないため、そのブラウザでテストできません

于 2013-04-22T23:07:16.263 に答える