IE6 and IE7 floating bug inside a header
Question
We have an anchor tag floating right inside a header issue. It works fine on IE8 and Firefox.
Any idea how to stop it popping outside the header box?
Here is the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.wrapper { border: 1px solid black; }
.wrapper h3 a { float: right; }
</style>
</head>
<body>
<div class="wrapper">
<h3>Contact Details
<a href="#" class="action button">Update</a>
</h3>
</div>
</body>
</html>
3 answers
solution1
3 2009-10-22 10:19:37
将右边的浮动元素放在第一位。
<h3><a href="#" class="action button">Update</a>Contact Details</h3>
solution2
0 2009-10-22 05:55:33
If you are floating it you need to tell the h3 to clear it. I assume this would work:
.wrapper h3 { overflow:hidden; zoom:1; }
LMK if not. And FYI, I wouldn't put the anchor inside of the h3 like that. I would probably make it a sibling of the h3, if necessary wrap a div around both and then apply the overflow/zoom.
solution3
0 2009-10-22 06:29:30
Fixed it. Here are two extra rules that I added in
.wrapper h3 { overflow:hidden; zoom:1; }
.wrapper h3 a { margin: -1em 0 0 0; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.