IE7浮动正确的问题 [英] IE7 float right problems
问题描述
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看起来像这样=>
我需要它看起来像这样（在chrome / ie8目前工作）=>
我应该改变什么？ ：）
您需要浮动这两个元素并清除它。
<！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： 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>
简介：
和绘图，但是这里简要说明了如何在交叉浏览器中浮动和清除工作：
元素可以向左或向右浮动。当有元素浮动时，元素不会向下推正常内容。请参阅为什么 -
浮动和清除：
图例：橙色/浮动右，蓝色/浮动左，灰线/清除分隔线，红色矩形/ em>
在这种情况下，您有一行文本的两个元素 - 一个浮动左边，另一个浮动右边。当浮动时，它不会向下推动内容，也就是占用空间。因此，如果你不使用 clear：两个在灰色线，下面的内容将在2个浮动元素之间向上堆叠，因此可能不是你想要的。
当在浮动下面使用 clear：both 时，浮动下方的内容将被推到任何浮动元素的最高高度。
仅限浮动：
图例：橙色/浮动右边，蓝色/正常内容，灰线/线
蓝色的正常内容已默认为 text-align：left; 。因此它是左定向的。你需要浮动在正常内容的前面，因为你告诉浏览器从这行浮动。
您应该尝试不同的条件来看到它的效果：将float放在前面，后面，向左浮动，向左，向右，向右和向左。
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>
I got problems with IE7 (IE6 support is not needed)
On IE7 rendered html looks like this=>
I need it to look like this (works on chrome/ie8 at the moment)=>
What should i change? :)
You need to float both elements and clear it.
<!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>
Or simply put the floating element in front of the normal element like this:
<!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>
Brief Explanation:
Pardon my english and drawing, but here's briefly how float and clearing works in cross browser:
An element can be floated left or right. When you have element floating, the element doesn't push "normal" content downwards. See why -
Float and clear:
Legend: Orange/Float Right, Blue/Float Left, Gray Lines/Clear divider, Red Rect/bounds
In this case, you have 2 elements of one line text - one float left, and the other float right. When floating, it will not push the contents downwards aka taking space. Thus if you do not use clear:both at the gray lines, the contents below will stack upwards between the 2 floating elements and thus may not be what you want.
When you use clear:both below the floats, the content below the floats will be pushed as far as whichever float element is of highest height. This is shown in the diagram's 2nd and 3rd section.
Float only:
Legend: Orange/Float Right, Blue/Normal content, Gray Lines/the line that is divded with the next, Red Rect/bounds
The blue normal content is already by default text-align: left;. Thus it is left oriented. You need the float to be in front of the normal content because you're telling the browser to float from this line.
You should experiment different conditions to see its effect: putting float in front, behind, float left right, clear both, clear right and left.
这篇关于IE7浮动正确的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
