IE8 で絶対位置を修正するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/1360131

質問

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;
}

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

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

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

これは、ドキュメントの種類を使用していないbecuaseです。そして、IEは "quircks" モードの中で働いています。

このDOCTYPEを試してみてください。

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

は常にHTML5のDOCTYPEを使用しますが、私の場合には唯一の問題は、親要素が必要なことだったi'd「位置：相対;」具体的に設定。その後、それは完全にうまく働いています。

また、使用することができます。

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

これは私の問題を修正！

マイクロソフトは次のように述べています。

ほとんどの場合、ウェブサイトでは HTML5 ドキュメントタイプを使用することをお勧めします 確立された標準と新しい標準の幅広いバージョンをサポートするために、 また、最も幅広いWebブラウザも対応しています。この例では、 をクリックして、HTML5 ドキュメントタイプを指定します。

多くのための 情報

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top