问题:

I have the body element set to 840px and then margins auto:

body {
width: 840px;
margin: auto;
}

on FF, safari, and chrome this centers everything in the body of my site. However on IE (testing in IE9 currently) all of my divs that are set to 100% still expand to the whole width of the screen. In dev tools it still says that the body has width 840 but it does not constrict the rest of the elements.

What to do here?

回答1:

Use valid doctype like <!DOCTYPE HTML>

<!DOCTYPE HTML>
<style>
body {
margin: 0 auto;
width: 1000px;
}
</style>

<body>
SALALALLA
</body>

回答2:

IE doesn't support that ... To do such you can create a master "container" div for IE only and use an IE specific CSS file (that mozilla etc will ignore, so that div will have no bearing on your current design) to set the width of the DIV and to center it using

#div_id{
width:840px;
left:50%;
margin-left:-420px;
}

Include the IE only css like such

<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="/css/ie8.css" media="all" />
<![endif]-->
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="/css/ie7.css" media="all" />
<![endif]-->

Limited, yes, but IE doesn't allow for body width to be set.