0

我有一个带有滚动内容的灯箱样式 div，我试图将其限制在视口内的合理大小。我也希望这个 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

4

4 回答 4

3

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

就是jsbin 的编辑页面不支持 IE8 -完整查看的完全相同的演示* 在 IE8 中的样式正确。

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

*该链接指向更高版本，但唯一的更改是从<html>标签中删除所有属性 - 我已添加这些以进行测试。因此，没有这些属性和 html5 文档类型的演示很好。

于 2012-11-11T02:59:48.747 回答
0

我曾经通过以下方式解决了这个问题：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">
于 2012-11-10T22:11:44.423 回答
0

确保您的页面声明为 HTML5

<!DOCTYPE html>
于 2014-02-20T14:14:54.630 回答
-1

IE<9中的垂直aling问题应该用这个来解决：

.bg {
  text-align: center;
}

.a {
  text-align: left;
}

但我不知道绝对位置出了什么问题

于 2012-11-10T22:55:33.757 回答