IE7 与 FF 浮动问题

发布于 2024-08-07 23:46:15 字数 966 浏览 3 评论 0原文

以下代码在 IE7 和 FF3 中呈现不同的效果（新代码发布旧代码有误导性 - 抱歉造成混淆）

     <!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>

我似乎无法弄清楚是什么导致了差异。我希望它像 FF 那样运行（当然）。任何指导表示赞赏。我看到的区别是，在 FF 中，左侧 div 从页面顶部开始，而在 IE 中，它呈现在其他 div“下方”（尽管它位于左侧）。

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

日暮斜阳 2024-08-14 23:46:15

从 FF 3.5 开始，他们开始使用与其他更现代的浏览器（IE8、Safari、Chrome）相同的盒子模型渲染。 IE7 使用的是早期过时的模型。您可能需要通过 CSS hack 专门针对 IE7。一个常见的 IE7 hack 是 *:first-child+html hack。

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

这将仅针对 IE7。如果您想以 FF 3+ 为目标，您可以使用：

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

并且仅适用于 FF 3.5：

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

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: ...
}

回复收藏 0 原文

屋顶上的小猫咪 2024-08-14 23:46:15

我对你原来的例子做了一些调整，下面的代码在 IE、FF、Chrome 和 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>

编辑：
在您编辑原始帖子后，我更新了我的代码。以上适用于 FF、Chrome、IE、Opera。

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.

回复收藏 0 原文

笑忘罢 2024-08-14 23:46:15

由于 IE 7 在决定元素宽度时不包括填充，而其他现代浏览器唯一的选择是使用仅 IE 7 的 width:560px

回复收藏 0 原文

如梦亦如幻 2024-08-14 23:46:15

不要进行任何修改，而是尝试将其添加到文档开头的标记之前：

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

如果没有 doctype 声明，IE7 会进入怪异模式，并且填充的工作方式与 Firefox 中不同。

来自维基百科（在怪异模式下，IE7 在这方面的行为类似于 IE5）：

当为任何块级元素显式指定宽度或高度时，它应该仅确定可见元素的宽度或高度，以及填充、边框和边距之后申请。 Internet Explorer 5 包括指定宽度或高度内的内容、内边距和边框；这会导致框的渲染更窄或更短。

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.

回复收藏 0 原文

~没有更多了~