div padding on firefox/ie7
Question
Is there any way to let the IE7 interpret CSS correctly, as in Firefox or something? I've got an issue with width + padding div attributes.
On FF/IE8+ div is automically expanding and content in this div is centered properly, but in IE7 div is moved on the right and the overflow hides the rest of the content. Look at the picture below:
(source:uploadpic.org )
Is there any way to hack this? Some css code:
#center { width: 50%; height:auto; position:relative; padding-left:500px; }
#both { width:1000px; float:right; }
#content_home { width:698px; margin:0 auto; min-height:400px;
float:left; position:relative; }
And the HTML code:
<div id="center">
<div id="both">
<div id="content_home">
<p>...</p>
</div>
<div id="right">
<p>...</p>
</div>
</div>
<div class="clear"></div>
</div>
2 answers
solution1
0 2011-05-27 16:02:53
Best way is to target IE7 and below with specific styles as they incorrectly apply the box model. You can do this with conditional body tags eg
<!-- Conditional CSS include for IE6 and below -->
<!--[if lt IE 7 ]><body class='ie6'><![endif]-->
<!-- Conditional CSS include for IE7 -->
<!--[if IE 7 ]><body class='ie7'><![endif]-->
<!-- Conditional CSS include for IE8 -->
<!--[if IE 8 ]><body class='ie8'><![endif]-->
<!-- Conditional CSS include for IE9 -->
<!--[if IE 9 ]><body class='ie9'><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->
Then in your CSS...
body.ie7{
width:12345px;
}
solution2
0 2011-05-27 16:04:46
Not sure if this will work in your case, but have you tried the IE7.js fix? It's a handy javascript file that aims to make IE browsers standards compliant. It might be worth a try.
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.