IE6 and IE7 floating bug inside a header
We have an anchor tag floating right inside a header issue. It works fine on IE8 and Firefox.
Any idea how to stop it popp开发者_如何学编程ing 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>
Put the right floated element first.
<h3><a href="#" class="action button">Update</a>Contact Details</h3>
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.
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; }
加载中,请稍侯......
精彩评论