IE8 ignores absolute positioning and margin:auto

问题

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.

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.

Why?
What are my options for workarounds?

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

Here's a demo of the problem: http://jsbin.com/urikoj/1/edit

回答1:

I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.

It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.

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

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

回答2:

I once fixed this issue by:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">

回答3:

Make sure your page is declared as HTML5

<!DOCTYPE html>

回答4:

The problem with the vertical aling in IE<9 should be solved with this:

.bg {
  text-align: center;
}

.a {
  text-align: left;
}

But I don't know what's going wrong with the absolute position

来源：https://stackoverflow.com/questions/13326511/ie8-ignores-absolute-positioning-and-marginauto

标签

html

css

internet-explorer-8