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

Question

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

同样的事情发生在镀铬位于右上角的按钮上。

This is my website，如果您使用这两种不同的浏览器（我尚未检查其他浏览器）进行检查，您可以看到问题所在。图片也在下面添加。

铬：

浏览器：

第一张小图片的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＆amp; top / bottom属性用于定位元素而不是margin。

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

另外：确保你的容器（绝对元素的父元素）设置为position: relative;，因此他的孩子（绝对元素）的位置将与他相关。如果你有一天必须移动容器，这将对你有很大的帮助..

Answer 2

你必须使用这个

pop.style.left = l+"px"; 
pop.style.top = t+"px";

而不是

pop.style.posLeft = l; 
pop.style.posTop = t;