IE7 versus FF floating issue_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-08 07:37 出处：网络

The following code renders differently in IE7 and FF3 (NEW CODE POSTED OLD CODE WAS MISLEADING - sorry for confusion)

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#boxr1{
background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
width:420px;

}

#boxr2{

background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
width:420px;

}

#boxleft{
border:3px solid #DDDDCA;
color:#277491;
width:300px;
}

</style>
</head>
<body>
<div style="width:800px">
    <div id="boxr1">test<br/>test<br/></div>

    <div id="boxr2">test2<br/>test2<br/></div>

    <div id="boxleft">leftdiv</div> 
</div>
<div style="clear:both;"></div>
</body>
</html>

I can't seem to figure out what is causing the difference. I want开发者_如何学JAVA it to behave the way FF does (of course). Any guidance is appreciated. The difference I see is that in FF the left div starts at the top of the page whereas in IE it is rendered "below" the other divs (although it is over to the left).

Starting with FF 3.5, they starting using the same box-model rendering as other more modern browsers (IE8, Safari, Chrome). IE7 is using an earlier out-dated model. You may need to target IE7 specifically with a CSS hack. One common IE7 hack is the *:first-child+html hack.

*:first-child+html <your class or id>
{
    margin: ...
}

This will target ONLY IE7. If you want to target FF 3+, you can use:

html>/**/body <your class or id>
{
    margin: ...
}

and for FF 3.5 ONLY:

body:nth-of-type(1) <your class or id>
{
    margin: ...
}

I tweaked your original example a little and the code below looks the same in IE, FF, Chrome, and Opera.

     <html>
<head>
<style>

#wrapper{
    width: 923px;
    vertical-align: top;
}

.boxRight{
background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
margin:3px 0;
width:560px;

}

#boxleft{

color:#277491;
width:357px;
float: left;

}

</style>
</head>
<body>
<div id="wrapper">   
    <div id="boxleft">leftdiv</div>
    <div id="boxr1" class="boxRight">test<br/>test<br/></div>
    <div id="boxr2" class="boxRight">test2<br/>test2<br/></div>    
</div>
<div style="clear:both;"></div>
</body>
</html>

EDIT: I updated my code after your edit to your original post. The above works in FF, Chrome, IE, Opera.

Since IE 7 does not include padding when deciding the width of the element while other modern browsers do the only option for you is to use a IE 7 only hack with width:560px

Instead of doing any hacks, try adding this to the beginning of the document before the <html> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Without a doctype declaration, IE7 goes into quirksmode and padding works differently than in Firefox.

From wikipedia (in quirksmode IE7 acts like IE5 in this regard):

When a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward. Internet Explorer 5 includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box.