web-dev-qa-db-ja.com

IE8で絶対位置を修正する方法は？

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>
cssinternet-explorer-8css-position
24
edt

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

<!DOCTYPE html>
24
Sampson

これを追加：

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

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

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

http://haslayout.net/haslayout を参照してください

19
yakunins

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
13
Sergei

私は常にHTML5 Doctypeを使用しますが、私の場合、唯一の問題は親要素が「position：relative;」を必要としたことです。具体的に設定します。その後、それは完璧に機能しました。

6
luschn

使用することもできます

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

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

2
Hanno

Microsoftは言う：

ほとんどの場合、WebサイトはHTML5ドキュメントタイプを使用して、最も幅広い種類の確立された標準と新しい標準、および最も広範なWebブラウザーをサポートすることをお勧めします。この例は、HTML5ドキュメントタイプを指定する方法を示しています。

詳細 Info

0
Anzil khaN