24

私が使用したすべてのブラウザーでは、ie8 を除いて、絶対配置された要素は、相対配置で最も近い親に従って配置できます。

以下のコードは、テーブル内の 2 つの div を示しています。上部の div には position: relative がありますが、ネストされた絶対配置要素はその境界を尊重しません (ie8 では、親 div の下部ではなく、ページの下部に配置されます)。

誰かがこれの修正を知っていますか?

<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
  <tr>
    <td><div id="top"> Div with id="top"
        <div id="position_me"> Div with id="position me" </div>
      </div>
      <div id="bottom"> Div with id="bottom"
        <p>Lorem ipsum dolor sit amet.</p>
      </div></td>
  </tr>
</table>
4

6 に答える 6

24

Doctype を宣言します。HTML5 doctype を使用することをお勧めします。

<!DOCTYPE html>
于 2009-09-01T01:20:23.657 に答える
19

これを追加：

#top {
//height: 100%;
}
#position_me {
//left: 0;
}

IE8 が quirks モードで位置を正しく計算するように強制します。それを取得するには多くの方法があります:

//zoom: 1;
//writing-mode: tb-rl;

http://haslayout.net/haslayoutを参照

于 2010-01-28T16:12:49.830 に答える
13

これは、ドキュメント タイプを使用していないためです。そしてIEは「癖」モードで動作しています。

このDoctypeを試してください:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
于 2009-09-01T01:27:39.340 に答える
2

使用することもできます

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

これで問題が解決しました！

于 2011-12-11T21:53:48.567 に答える