今天在做项目使用right时,老是碰到在IE6中显示总是比自己定义的right要小,没时间想那么多迫不得已就使用了hack方法解决,于是晚上闲余时特意测试了一下,最后终于找到原因之所在了:IE6中如果使用absolute标签的父级DIV(此DIV使用了relative)不定义宽度,则该标签的right定位会出问题。好像挺难看懂这话的意思,还是看看下面的例子吧,先看下面代码:
复制代码代码如下:
<div style="background:red;height:50px;width:300px;padding:10px;">
<div style="background:green;position:relative;">
<a href="#" style="position:absolute;right:20px;top:0;background:blue;">测试</a>
</div>
</div>
代码显示效果如下图:
由图可知,谷歌浏览器显示是我们所预期的那样,而IE6有点诡异。IE6中蓝色距离红色右边有20px,而谷歌浏览器中有30px,经过不断的测试发现在IE6中,上面的代码中a标签中的right是相对于最外面的那个div,而非父级div。同时我又测试了一下left,发现left显示的是正常的。
目前的只知道有两种解决方法:
1、就是用hack方法,将实际的right值加上最外面DIV的内边距(_right:20+10 px);
2、定义a标签的父级div的宽度即可。
复制代码代码如下:
<div style="background:red;height:50px;width:300px;padding:10px;">
<div style="background:green;position:relative;">
<a href="#" style="position:absolute;right:20px;top:0;background:blue;">测试</a>
</div>
</div>
代码显示效果如下图:
由图可知,谷歌浏览器显示是我们所预期的那样,而IE6有点诡异。IE6中蓝色距离红色右边有20px,而谷歌浏览器中有30px,经过不断的测试发现在IE6中,上面的代码中a标签中的right是相对于最外面的那个div,而非父级div。同时我又测试了一下left,发现left显示的是正常的。
目前的只知道有两种解决方法:
1、就是用hack方法,将实际的right值加上最外面DIV的内边距(_right:20+10 px);
2、定义a标签的父级div的宽度即可。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“IE6中DIV使用了relative不定义宽度导致right定位误差”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。