IE6 和 IE7 标题内浮动错误

发布于 2024-08-08 02:17:45 字数 570 浏览 6 评论 0原文

我们有一个锚标记浮动在标题问题内。它在 IE8 和 Firefox 上运行良好。

知道如何阻止它弹出标题框之外吗?

下面是代码:

<!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>

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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

冰魂雪魄 2024-08-15 02:17:45

首先放置右侧的浮动元素。

<h3><a href="#" class="action button">Update</a>Contact Details</h3>

Put the right floated element first.

<h3><a href="#" class="action button">Update</a>Contact Details</h3>
撩起发的微风 2024-08-15 02:17:45

如果你正在浮动它,你需要告诉 h3 清除它。我认为这会起作用:

.wrapper h3 { overflow:hidden; zoom:1; }

LMK 如果没有。仅供参考,我不会像那样将锚点放在 h3 内部。我可能会让它成为 h3 的同级,如果有必要的话,在两者周围包裹一个 div,然后应用溢出/缩放。

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.

岁月染过的梦 2024-08-15 02:17:45

修好了。这是我添加的两条额外规则

.wrapper h3 { overflow:hidden; zoom:1; } 
.wrapper h3 a { margin: -1em 0 0 0; } 

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; } 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文