定位在 ff、chrome 中有效,但在 ie7 中无效

发布于 2024-10-10 11:04:34 字数 1090 浏览 6 评论 0原文

我有一些 div,我也用

position:absolute;
width:100px;
margin:-20px 420px;

同样的方式定位了另一个 div... 问题是它在 chrome 和 firefox 中看起来很好,但在 ie7 中这些 div 被移走了。 如何设置它在所有浏览器中看起来都很完美?谢谢 编辑:

.button {
  display:block;
  position:absolute;
  width:200px;
  height:50px;
  background:url(../images/portfolio.gif) no-repeat 0 -49px;
  margin:-50px 420px;
}
.button a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/portfolio.gif) no-repeat 0 0;
  text-indent:-9999px;
}
.button a:hover {
  background-position: 0 50px;
}


.button1 {
  display:block;
  position:absolute;
  width:200px;
  height:50px;
  background:url(../images/design-brief.gif) no-repeat 0 -49px;
  margin:-20px 420px;
}
.button1 a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/design-brief.gif) no-repeat 0 0;
  text-indent:-9999px;
}
.button1 a:hover {
  background-position: 0 50px;
}

这两个按钮,button和button1以及一些文本都在这个div内

.cont
{
position:relative;
width:1400px;
height:500px;

}

I have some divs which i positioned with

position:absolute;
width:100px;
margin:-20px 420px;

same like this another one also...
the problem is it is looking fine in chrome and firefox ,but in ie7 those divs are being moved away.
how to set it to look perfect in all browsers??thanks
edited:

.button {
  display:block;
  position:absolute;
  width:200px;
  height:50px;
  background:url(../images/portfolio.gif) no-repeat 0 -49px;
  margin:-50px 420px;
}
.button a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/portfolio.gif) no-repeat 0 0;
  text-indent:-9999px;
}
.button a:hover {
  background-position: 0 50px;
}


.button1 {
  display:block;
  position:absolute;
  width:200px;
  height:50px;
  background:url(../images/design-brief.gif) no-repeat 0 -49px;
  margin:-20px 420px;
}
.button1 a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/design-brief.gif) no-repeat 0 0;
  text-indent:-9999px;
}
.button1 a:hover {
  background-position: 0 50px;
}

these two buttons,button and button1 are inside this div along with some text

.cont
{
position:relative;
width:1400px;
height:500px;

}

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

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

发布评论

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

评论(3

他夏了夏天 2024-10-17 11:04:34

我想你必须设置一个 top:0px 和一个 left:0px。如果不设置实际位置,则无法使用 position:absolute

或者:您可以尝试 position:staticposition:relative,我不确定您想做什么。

I guess you have to set a top:0px and a left:0px. You can not use position:absolute without setting a real position.

Or: You can try position:static or position:relative, I'm not sure what you want to do.

花伊自在美 2024-10-17 11:04:34

不要使用边距来定位按钮。如果你已经设置了 position:absolute; 使用 top: 0px; left: 0px; (显然将它们设置到所需的位置)。由于您已将父 div .cont 设置为 position:relative;,因此只要按钮位于 DOM 中,它们就会设置在该 div 中。所以如果你要设置它们 top: 0px; left: 0px; 按钮位于 div 的左上角。

比玩负利润可靠得多。

Don't use margin to position your buttons. If you have made it position:absolute; use top: 0px; left: 0px; (obviously setting them to the desired position). As you have set the parent div .cont as position:relative; the buttons will be set within this div as long as they are there in the DOM. So if you were to set them top: 0px; left: 0px; the buttons would sit in the top left hand corner of the div.

Much more reliable than playing with negative margins.

秉烛思 2024-10-17 11:04:34

同意马特·阿斯伯里的观点……如果你使用头寸,那么就没有使用保证金。还有一件事,您对按钮使用绝对位置。在这种情况下,不要对其子级使用位置,除非并且直到您也想定位其子级。如果您可以提供 html,那么将很容易理解代码和帮助。

Agree with Matt Asbury... If u r using positions then there is no use of margins. and one more thing, u r using position absolute for buttons. in that case don't use position for its child unless and until u want to position its child as well. If u can provide html then it will be easy to understand the code and help.

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