简体   繁体   中英

Center div not working in IE8?

Never had problems with centering divs before but I have been trying to get 100% height columns (which I have achieved for most browsers). I believe that the 100% height is messing with the centering of the div in IE8.

So basically I'm trying to get #wholewrap to center align and I'm currently using margin: 0 auto; but it doesn't work for IE8?

Any ideas why this bug occurs or how to fix it?

If you try this code it should work in FF, Chrome and Opera, havn't got IE9.

For some reason the results for this in JSFiddle vary for IE8 for some reason, what it shows in JSFiddle is not actually what it shows in IE8.

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="newcss.css"/>
</head>
<body>

<div id='wholewrap'>

    <div class='ttc'>
       <p>
          Left Column<br />
          Left Column<br />
          Left Column<br />
       </p>
    </div>

    <div class='otc'>
       <p>
          Right Column<br />
          Right Column<br />          
       </p>
    </div>

    <br style='clear:both;' />
</div>

</body>
</html>

CSS

div{border:1px #000 solid;}

html{height: 100%;}

body{height: 100%;}

#wholewrap{width:500px;margin:0 auto;min-height: 100%;height: 100%;}

.ttc{width:45%;float:left;min-height: 100%;height: 100%;}
.otc{width:45%;float:right;min-height: 100%;height: 100%;}

可能与doctype 。尝试将<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">或HTML5在<html>上方的<!DOCTYPE HTML> <html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM