Ie8を除く、私が使用したすべてのブラウザーでは、絶対配置された要素は、相対配置で最も近い親に従って配置できます。
以下のコードは、テーブル内の2つのdivを示しています。上のdivには位置があります。ただし、ネストされた、絶対に配置された要素はその境界を考慮しません(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>
Doctypeを宣言します。 HTML5 doctypeを使用することをお勧めします。
<!DOCTYPE html>
これを追加:
#top {
//height: 100%;
}
#position_me {
//left: 0;
}
IE8がQuirksモードで位置を正しく計算するように強制します。それを得るには多くの方法があります:
//zoom: 1;
//writing-mode: tb-rl;
http://haslayout.net/haslayout を参照してください
これは、ドキュメントタイプを使用していないためです。そしてIE "quirks"モードで動作 。
このDoctypeを試してください:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
私は常にHTML5 Doctypeを使用しますが、私の場合、唯一の問題は親要素が「position:relative;」を必要としたことです。具体的に設定します。その後、それは完璧に機能しました。
使用することもできます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
これで問題が解決しました!
Microsoftは言う:
ほとんどの場合、WebサイトはHTML5ドキュメントタイプを使用して、最も幅広い種類の確立された標準と新しい標準、および最も広範なWebブラウザーをサポートすることをお勧めします。この例は、HTML5ドキュメントタイプを指定する方法を示しています。
詳細 Info