绝对定位会给IE/Chrome带来麻烦

Question

我的网站上有一个画廊.切换所显示照片的一种方法是按下图库底部的小图像(如下图所示).为了定位小图像,我使用绝对定位和边距,根据需要使它们笔直.问题是,当我在chrome中使用绝对定位时,图像的默认位置从中间开始(因此,为了定位第一个图像(1),我将其指定为'margin-right:-395px;'.在IE中, image的dafault positiong从它应该的位置开始:所以'-395px'使图像向右移动,图像显示得很糟糕.

Chrome中的按钮位于右上角也是如此.

这是我的网站,如果您使用这两种不同的浏览器进行检查(我还没有检查其他浏览器),您可以看到问题所在.图像也在下面添加.

铬:

资源管理器:

第一个小图像的CSS :(第二个图像:向右边缘添加100,第三个图像:添加200)

height:90px;
width:90px;
margin-top:5px;
position:absolute;
opacity:0.6;
filter:alpha(opacity=60);
border-radius:5px;
cursor:pointer;
margin-right:-395px;

Answer 1

如果你使用绝对定位.你应该使用right/ left&top/ bottom属性来定位元素而不是margin.

如果您这样做,所有浏览器都会将您的元素放在同一个位置.在这里阅读更多

另外:确保你的容器(绝对元素的父元素)已经position: relative;设置,所以他的孩子(绝对元素)的位置将与他相关.如果你有一天必须移动容器,这将极大地帮助你.