当前位置: 动力学知识库 > 问答 > 编程问答 >

html - IE7 versus FF floating issue

问题描述:

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 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).

网友答案:

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.

网友答案:

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: ...
}
网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: