Opera中已清除浮动的边距 [英] margins on cleared floats in Opera

查看：102
本文介绍了Opera中已清除浮动的边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

哎呀！我会疯狂地尝试在浮动的

div之后获得恒定的保证金。它可以在浏览器中运行。


这适用于IE而不是Firefox：


< html xmlns =" http：//www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">

< head>< / head>

< body>

< div style = "浮动：左;高度：100像素; background-color：red;">

我漂浮< / div>

< div style =" clear：both; margin-top：50px;">此文本在浮动div后显示

保证金< / div>

< / body>

< / html>


这适用于IE和Firefox，但不适用于Opera


< html xmlns =" http://www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">

< head>< / head>

< body>

< div style = "浮动：左;高度：100像素; background-color：red;">

我漂浮< / div>

< div style =" clear：both;" >< / div>

< div style =" margin-top：50px;">这个文字应该有一个保证金

浮动的div< ; / div>

< / body>

< / html>


看来Opera只接受清算div如果它是
包含的东西。但是，如果它包含某些东西，那么我得到额外的

空格，我似乎无法摆脱它。即：


< html xmlns =" http：//www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">

< head>< / head>

< body>

< div style = "浮动：左;高度：100像素; background-color：red;">

我漂浮< / div>

< div style =" clear：both;余量：0; border：0;

padding：0;">& nbsp;< / div>

< div style =" margin-top：50px; ">这个文字应该有一个保证金

浮动的div< / div>

< / body>

< / html>


这似乎工作正常，直到你使保证金变小 - 比如2

像素：


< html xmlns =" http：//www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">

< head>< / head>

< body>

< div style = "浮动：左;高度：100像素; background-color：red;">

我漂浮< / div>

< div style =" clear：both;余量：0; border：0;

padding：0;">& nbsp;< / div>

< div style =" margin-top：2px; ">这个文字应该有一个保证金

浮动的div< / div>

< / body>

< / html>


哪里有来自的空白！唉！


非常感谢您的帮助

解决方案



listerofsme ... @ hotmail.com写道：


Argh！我会疯狂地尝试在浮动的

div之后获得恒定的保证金。它可以在浏览器中运行。


这适用于IE而不是Firefox：


< html xmlns =" http：//www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">

< head>< / head>

< body>

< div style = "浮动：左;高度：100像素; background-color：red;">

我漂浮< / div>

< div style =" clear：both; margin-top：50px;">此文本在浮动div后显示

保证金< / div>

< / body>

< / html>


这适用于IE和Firefox，但不适用于Opera


< html xmlns =" http://www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">

< head>< / head>

< body>

< div style = "浮动：左;高度：100像素; background-color：red;">

我漂浮< / div>

< div style =" clear：both;" >< / div>

< div style =" margin-top：50px;">这个文字应该有一个保证金

浮动的div< ; / div>

< / body>

< / html>


看来Opera只接受清算div如果它是
包含的东西。但是，如果它包含某些东西，那么我得到额外的

空格，我似乎无法摆脱它。即：


< html xmlns =" http：//www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">

< head>< / head>

< body>

< div style = "浮动：左;高度：100像素; background-color：red;">

我漂浮< / div>

< div style =" clear：both;余量：0; border：0;

padding：0;">& nbsp;< / div>

< div style =" margin-top：50px; ">这个文字应该有一个保证金

浮动的div< / div>

< / body>

< / html>


这似乎工作正常，直到你使保证金变小 - 比如2

像素：


< html xmlns =" http：//www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">

< head>< / head>

< body>

< div style = "浮动：左;高度：100像素; background-color：red;">

我漂浮< / div>

< div style =" clear：both;余量：0; border：0;

padding：0;">& nbsp;< / div>

< div style =" margin-top：2px; ">这个文字应该有一个保证金

浮动的div< / div>

< / body>

< / html>


哪里有来自的空白！非常好！


非常感谢任何帮助



我应该补充说，底部2个例子有一个非破坏的空白，但这已经从我的帖子中消失了（我猜它

由我的浏览器翻译过来！）

< br>

li ************ @ hotmail.com 写道：


>

我应该补充说，底部2个示例有一个非破坏的空白
$ b清算div中的$ b，但这已经从我的帖子中消失了（我猜它

由我的浏览器翻译过！）



哪个是你应该总是张贴网址而不是代码的原因之一。


-

Berg


< blockquote><！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"

" http：//www.w3.org/TR/html401/strict.dtd" ;>

< html>

< head>

< title> KISS< / title>

< meta http-equiv =" Content-Type"

content ="为text / html; charset = iso-8859-1">

< / head>

< body>

< div style ="向左飘浮;高度：100像素; background-color：red;">

我漂浮< / div>

< br style =" clear：both">

< div style =" margin-top：50px;">这个文字应该有一个保证金

浮动的div< / div>

< / body>

< / html>


参见< http://en.wikipedia.org/wiki / KISS_principle ;-)


Argh! I''m going nuts trying to get a constant margin after a floated
div that works cross browser.

This works in IE but not Firefox:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<div style="clear:both; margin-top:50px;">This text should have a
margin after the floated div</div>
</body>
</html>

This works in both IE and firefox, but not Opera

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<div style="clear:both;"></div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

It appears Opera only honours the clearing div for margins if it
contains something. However, if it contains something, then I get extra
whitespace which I can''t seem to get rid of. ie:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<div style="clear:both; margin:0; border:0;
padding:0;">&nbsp;</div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

This appears to work fine, until you make the margin smaller - say 2
pixels:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<div style="clear:both; margin:0; border:0;
padding:0;">&nbsp;</div>
<div style="margin-top:2px;">This text should have a margin after
the floated div</div>
</body>
</html>

Where''s the sodding whitespace coming from! Argh!

Many thanks for any help

解决方案


listerofsme...@hotmail.com wrote:

Argh! I''m going nuts trying to get a constant margin after a floated
div that works cross browser.

This works in IE but not Firefox:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<div style="clear:both; margin-top:50px;">This text should have a
margin after the floated div</div>
</body>
</html>

This works in both IE and firefox, but not Opera

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<div style="clear:both;"></div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

It appears Opera only honours the clearing div for margins if it
contains something. However, if it contains something, then I get extra
whitespace which I can''t seem to get rid of. ie:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<div style="clear:both; margin:0; border:0;
padding:0;">&nbsp;</div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

This appears to work fine, until you make the margin smaller - say 2
pixels:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<div style="clear:both; margin:0; border:0;
padding:0;">&nbsp;</div>
<div style="margin-top:2px;">This text should have a margin after
the floated div</div>
</body>
</html>

Where''s the sodding whitespace coming from! Argh!

Many thanks for any help

I should add that the bottom 2 examples have a non breaking whitespace
in the clearing div, but this has disappeared from my post (I guess it
got translated by my browser!)


li************@hotmail.com wrote:

>
I should add that the bottom 2 examples have a non breaking whitespace
in the clearing div, but this has disappeared from my post (I guess it
got translated by my browser!)

Which is one reason why you should always post a URL, not code.

--
Berg


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>KISS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I''m floating</div>
<br style="clear:both">
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

See also <http://en.wikipedia.org/wiki/KISS_principle;-)


这篇关于Opera中已清除浮动的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆