gpt4 book ai didi

html - IE8 忽略绝对定位和边距 :auto

转载 作者:太空宇宙 更新时间:2023-11-04 04:51:52 24 4
gpt4 key购买 nike

我有一个带有滚动内容的灯箱样式 div,我试图将其限制在视口(viewport)内的合理大小。我还希望这个 div 水平居中。这在 Fx/Chrome/IE9 中都很容易。

我的问题是 IE8 忽略了我用来调整内容大小的绝对定位,以及我用来水平居中灯箱的规则 margin: 0 auto

  1. 为什么?
  2. 我有哪些变通办法?

编辑:通过在父元素上设置 text-align:center 解决了居中问题,但我不知道为什么会这样,因为我想要的元素中心不是内联的。仍然停留在绝对定位的东西上。

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

最佳答案

我发现发生了什么,不是文档类型,也不是代码需要更改的任何内容。

jsbin的编辑页面不支持IE8 - the exact same demo viewed in full * 在 IE8 中的样式正确。

在编辑模式下,当在 IE9 中使用 IE8 浏览器模式和 IE8 文档标准查看时,jsbin 似乎应用了怪癖模式或类似的东西。令人惊讶的是,该演示还适用于 IE7 浏览器模式和文档标准(关闭 quirks 模式)。

*该链接指向更高版本,但唯一的变化是删除了 <html> 中的所有属性。标签 - 我添加了这些用于测试。因此,该演示没有这些属性和 html5 文档类型也很好。

关于html - IE8 忽略绝对定位和边距 :auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13326511/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com