jQuery的定位元素在Internet Explorer 8中不起作用

Question

I have a set of images inside a div that I position with jQuery on page load.

var myimg = $('#myimg');
... // Calculate x and y
myimg.css('left', x);
myimg.css('bottom', y);

Each image has a position: absolute style, while their containing div has a position: relative style.

This works in all browsers except for Internet Explorer 8 (have not tried 9). The images do not get their positions set. I can confirm that the JavaScript is running, especially since I'm also rotating the images using jqueryrotate to rotate the images when I position them, and they appear rotated in IE.

Edit

This is the full JavaScript code. What I'm trying to do specifically is arrange the images in a circle.

var num_imgs = 14;

var angle_delta = 360 / num_imgs;

var center_x = 365;
var center_y = 245;
var radius = 230;

for (var i = 0; i < num_imgs; ++i) {
    var angle = (angle_delta * i) + 90;

    var radians = angle * 0.0174532925;
    var x = Math.round(radius * Math.cos(radians));
    var y = Math.round(radius * Math.sin(radians));

    var img = $('#myimg-' + i);
    img.rotate(90 - angle); // Only part of the code that works
    img.css('left', center_x + x);
    img.css('bottom', center_y + y);
}

Answer 1

Are your x and y values simple integers, or do they have the 'px' suffix? They should be something like '100px', not simply 100, so if you are missing the px, that could be the problem.

Answer 2

Try wrapping each image in a <div> and assign your myimg# id to that div instead of directly to the image. Add a class to each image-containing <div> so that you can style them with absolute positioning all at once.

You'll need to use a little DOM traversal to get to the actual image, but that's only important for the plugin -- just use img.children('img').rotate(90 - angle) instead of img.rotate(90 - angle) . Your CSS positioning will all use the <div> .

http://jsfiddle.net/R86Ud/4/