IE8忽略绝对定位和margin：auto [英] IE8 ignores absolute positioning and margin:auto
问题描述
我有一个灯箱式的div滚动内容，我想限制在合适的大小在视口内。我也想要这个div水平居中。这在Fx / Chrome / IE9很容易。
I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9.
我的问题是IE8忽略了我使用的大小内容的绝对定位，规则<$ c $
My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox.
- 为什么？
- 我的解决方法有哪些？
EDIT ：通过在父元素上设置 text-align：center 来固定，但是我不知道为什么这样工作，因为我想要居中的元素不是内联的。仍然坚持绝对定位的东西。
EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff.
HTML：
<div class="bg">
<div class="a">
<div class="aa">titlebar</div>
<div class="b">
<!-- many lines of content here -->
</div>
</div>
</div>
CSS：
body { overflow: hidden; height: 100%; margin: 0; padding: 0; }
/* IE8 needs ruleset above */
.bg {
background: #333;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */
}
.a {
background: #eee; border: 3px solid #000;
height: 80%; max-height: 800px; min-height: 200px;
margin: 0 auto;
position: relative;
width: 80%; min-width: 200px; max-width: 800px;
}
.aa {
background: lightblue;
height: 28px; line-height: 28px;
text-align: center;
}
.b {
background: coral;
overflow: auto;
padding: 20px;
position: absolute;
top: 30px; right: 0; bottom: 0; left: 0;
}
这是一个问题的演示： http://jsbin.com/urikoj/1/edit
Here's a demo of the problem: http://jsbin.com/urikoj/1/edit
推荐答案
我发现了发生了什么，它不是doctype，也不是需要改变的代码。
I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.
jsbin的编辑页面不支持IE8 - 完全相同的演示文稿 *样式
It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.
在编辑模式下，jsbin似乎在IE8浏览器模式和IE8文档标准下应用怪异模式或奇怪的样子。令人惊讶的是，该演示也适用于IE7浏览器模式和文档标准（quirks模式关闭）。
In edit mode, jsbin seems to apply quirks mode or something odd like that when viewed in IE9 with IE8 browser mode and IE8 document standards. Surprisingly, the demo also works with IE7 browser mode and document standards (quirks mode off).
*链接到以后的版本，但唯一的更改是删除来自< html> 标签的所有属性 - 我添加了这些用于测试。所以，演示是没有这些属性，并与html5 doctype。
*the link goes to a later revision, but the only change was to remove all the attributes from the <html> tag - I had added these for testing. So, the demo is fine without those attributes, and with the html5 doctype.
这篇关于IE8忽略绝对定位和margin：auto的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
