div padding on firefox/ie7
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:
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="conten开发者_运维问答t_home">
<p>...</p>
</div>
<div id="right">
<p>...</p>
</div>
</div>
<div class="clear"></div>
</div>
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 e.g.
<!-- 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;
}
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.
http://code.google.com/p/ie7-js/
加载中,请稍侯......
精彩评论