定位在 ff、chrome 中有效,但在 ie7 中无效
我有一些 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我想你必须设置一个
top:0px
和一个left:0px
。如果不设置实际位置,则无法使用position:absolute
。或者:您可以尝试
position:static
或position:relative
,我不确定您想做什么。I guess you have to set a
top:0px
and aleft:0px
. You can not useposition:absolute
without setting a real position.Or: You can try
position:static
orposition:relative
, I'm not sure what you want to do.不要使用边距来定位按钮。如果你已经设置了
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;
usetop: 0px; left: 0px;
(obviously setting them to the desired position). As you have set the parent div.cont
asposition:relative;
the buttons will be set within this div as long as they are there in the DOM. So if you were to set themtop: 0px; left: 0px;
the buttons would sit in the top left hand corner of the div.Much more reliable than playing with negative margins.
同意马特·阿斯伯里的观点……如果你使用头寸,那么就没有使用保证金。还有一件事,您对按钮使用绝对位置。在这种情况下,不要对其子级使用位置,除非并且直到您也想定位其子级。如果您可以提供 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.