2

I have a gallery on my website. One way to switch the photo that's shown is to press the little images on the bottom of the gallery (as shown in the below photos). To position the little images I used absolute positioning and margins, as needed to make them straight. The problem is, that when I use absolute positioning in chrome, the image's default position starts from the middle (so to position the first image (1), I assigned it with 'margin-right:-395px;'. In IE, the image's dafault positiong start from where it really should be: So the '-395px' make the image go further to the right, and the images are shown badly.

The same thing happens with the button that in chrome is on the right-top corner.

This is my website, if you check it with those 2 different browsers (I haven't checked others yet), you can see the problem. Images are added below as well.

Chrome: Chrome

Explorer: Internet Explorer

CSS for first little image: (second image: add 100 to margin-right, third image: add 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;
4

2 回答 2

8

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

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

另外:确保您的容器(绝对元素的父元素)已position: relative;设置,因此他的子元素(绝对元素)的定位将相对于他。如果有一天您必须移动容器,这将对您有很大帮助..

于 2013-09-13T10:26:02.180 回答
1

你必须使用这个

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

代替

pop.style.posLeft = l; 
pop.style.posTop = t;
于 2014-07-03T23:25:13.917 回答