IE7漂浮正确的问题
Arn*_*psa 48 css internet-explorer internet-explorer-7
HTML =>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style='border: 1px solid red; width: 100px;'>
<a href="#">foo</a>
<a href="#"style="border-color: blue; float: right;">bar</a>
</div>
something
</body>
</html>
我遇到了IE7的问题(不需要IE6支持)
在IE7上渲染的html看起来像这样=>
alt text http://i48.tinypic.com/saxs9d.jpg
我需要它看起来像这样(目前在chrome/ie8上工作)=>
alt text http://i49.tinypic.com/2ufgbr4.jpg
我应该改变什么？:)
mau*_*ris 96
您需要浮动两个元素并清除它.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#" style="float:left;">foo</a>
<div style="clear:both;"></div>
</div>
something
</body>
</html>
或者简单地将浮动元素放在普通元素的前面,如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#">foo</a>
</div>
something
</body>
</html>
简要说明:
请原谅我的英文和绘图,但这里简要介绍了浮动和清算在跨浏览器中的工作原理:
元素可以向左或向右浮动.当元素浮动时,元素不会向下推"正常"内容.看看为什么 -
漂浮和清除:
图例:橙色/浮动右侧,蓝色/浮动左侧,灰色线条/清除分隔线,红色矩形/边界
在这种情况下,您有一个行文本的2个元素 - 一个浮动左边,另一个浮动右边.浮动时,它不会向内推动内容,也就是占用空间.因此,如果您不使用clear:both灰线,下面的内容将在2个浮动元素之间向上堆叠,因此可能不是您想要的.
当您clear:both在浮子下面使用时,浮子下方的内容将被推到最高高度的浮子元素.这在图的第2和第3部分中显示.
仅漂浮:
图例:橙色/浮动右侧,蓝色/正常内容,灰色线条/与下一个划分的线条,红色矩形/边界
蓝色普通内容已默认text-align: left;.因此它是左倾的.你需要浮点数在正常内容之前,因为你告诉浏览器从这一行浮动.
您应该尝试不同的条件来看它的效果:将浮子放在前面,后面,向左浮动,清除两者,向右和向左清除.
- 顺便问一下,很棒的答案!:) (3认同)
| 归档时间： |
|
| 查看次数： |
39905 次 |
| 最近记录： |