CSS 如何修复 IE8 中的绝对定位？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1360131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix Absolute Positioning In IE8?
提问by edt
In every browser I've used, except ie8, an absolutely positioned element can be positioned according to the closest parent with relative positioning.
在我使用过的每个浏览器中，除了 ie8，绝对定位的元素可以根据最近的具有相对定位的父元素来定位。
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).
下面的代码显示了一个表中的两个 div。顶部 div 具有 position:relative，然而，嵌套的、绝对定位的元素不遵守其边界（在 ie8 中，它被定位在页面底部而不是父 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>
采纳答案by Sampson
Declare a doctype. I'd encourage you to use the HTML5 doctype:
声明一个文档类型。我鼓励您使用 HTML5 文档类型：
<!DOCTYPE html>
回答by yakunins
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:
它强制 IE8 在 quirks 模式下正确计算位置。有多种获取方式：
//zoom: 1;
//writing-mode: tb-rl;
回答by Sergei
That's becuase you're not using the document type. And IE working in the "quircks" mode.
那是因为您没有使用文档类型。并且 IE 在“怪癖”模式下工作。
Try this doctype:
试试这个文档类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
回答by luschn
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.
我总是使用 HTML5 文档类型，但就我而言，唯一的问题是父元素需要“位置：相对；” 具体设置。在那之后，它工作得很好。
回答by Hanno
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!
这解决了我的问题！
回答by Anzil khaN
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.
在大多数情况下，我们建议网站使用 HTML5 文档类型来支持最广泛的既定和新兴标准，以及最广泛的 Web 浏览器。此示例显示如何指定 HTML5 文档类型。
For more Info
更多信息
