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

【问题标题】：Absolute positioning makes trouble with IE/Chrome绝对定位给 IE/Chrome 带来麻烦
【发布时间】：2013-09-17 19:48:24
【问题描述】：

我的网站上有一个画廊。切换所显示照片的一种方法是按下图库底部的小图像（如下图所示）。为了定位小图像，我使用了绝对定位和边距，根据需要使它们笔直。问题是，当我在 chrome 中使用绝对定位时，图像的默认位置从中间开始（因此要定位第一张图像 (1)，我将其分配为 'margin-right:-395px;'。在 IE 中，图片的默认位置g从它真正应该的位置开始：所以'-395px'使图片向右走得更远，图片显示不好。

chrome 中右上角的按钮也会发生同样的情况。

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;

【问题讨论】：

现在无法签入 IE，但是当您从 .pic_scroller_2 中删除绝对定位时会发生什么？
它保持不变。我改了网站上的代码，你可以看看。
我遇到了类似的问题 - 尽管情况要简单得多 - 我设法通过从父级中删除绝对定位并将text-align: center 添加到父级来解决。我进行了一个小测试，它似乎不会影响 Chrome 中的任何其他位置，所以也许这可以欺骗 IE 改变它的起始位置。
不起作用。我猜它不起作用，因为这不是文本，而是图像。我会尝试使图像居中，但我不能使用'margin：auto;'因为必须有一个左右边距。
给图片一个display:inline怎么样？

标签： css internet-explorer google-chrome css-position margin

【解决方案1】：

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

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

另外：确保你的容器（绝对元素的父级）设置了position: relative;，所以他的孩子（绝对的）的定位将相对于他。如果有一天您必须移动容器，这将对您有很大帮助..

【讨论】：

非常感谢！你能解释一下为什么使用保证金会破坏浏览器吗？ 'right' 和 'margin-right' 有什么区别？
我认为this 回答了你的问题。

【解决方案2】：

你必须使用这个

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

而不是

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

【讨论】：