How to fix Absolute Positioning In IE8?

2019-02-01 07:21发布

站内问答 / HTML/CSS
829 6 5

In every browser I've used, except ie8, an absolutely positioned element can be positioned according to the closest parent with relative positioning.

The below code shows two divs inside a table. The top div has position: relative, however, the nested, absolutely positioned element does not respect its boundaries (in ie8, it gets positioned at the bottom of the page instead of the bottom of the parent div).

Does anybody know a fix for this?

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

6条回答
时光不老，我们不散
2楼-- · 2019-02-01 07:56

Declare a doctype. I'd encourage you to use the HTML5 doctype:

<!DOCTYPE html>
查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-02-01 08:00

You can also use

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

This fixed my problem!

查看更多
0人赞 添加讨论(0) 举报
干净又极端
4楼-- · 2019-02-01 08:03

That's becuase you're not using the document type. And IE working in the "quircks" mode.

Try this doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
5楼-- · 2019-02-01 08:08

i´d always use the HTML5 doctype, but in my case the only problem was that the parent element needed "position:relative;" specifically set. after that, it worked perfectly fine.

查看更多
0人赞 添加讨论(0) 举报
走好不送
6楼-- · 2019-02-01 08:09

Add this:

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

It forces IE8 to compute position correctly in quirks mode. There are many ways to get it:

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

See http://haslayout.net/haslayout

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
7楼-- · 2019-02-01 08:15

Microsoft Says :

In most cases, we recommend that websites use the HTML5 document type to support the widest variety of established and emerging standards, as well as the broadest range of web browsers. This example shows how to specify the HTML5 document type.

For more Info

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)