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

Question

我在页面加载时使用 jQuery 定位的 div 中有一组图像。

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

每个图像都有一个position: absolute 样式，而它们包含的div 有一个position: relative 样式。

这适用于除 Internet Explorer 8 之外的所有浏览器（尚未尝试 9）。图像没有设置它们的位置。我可以确认 JavaScript 正在运行，特别是因为我还使用 jqueryrotate 旋转图像，以便在我定位图像时旋转图像，并且它们在 IE 中显示为旋转。

编辑

这是完整的 JavaScript 代码。我正在尝试做的具体是将图像排列成一个圆圈。

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

尝试将每个图像包装在 <div> 中，并将您的 myimg# id 分配给该 div，而不是直接分配给图像。为每个包含 <div> 的图像添加一个类，以便您可以一次性使用绝对定位设置它们的样式。

您需要使用一点 DOM 遍历来获取实际图像，但这仅对插件很重要 - 只需使用 img.children('img').rotate(90 - angle) 而不是 img.rotate(90 - angle)。您的 CSS 定位将全部使用<div>。

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

Answer 2

您的 x 和 y 值是简单的整数，还是有“px”后缀？它们应该是“100px”，而不仅仅是 100，所以如果您缺少 px，这可能是问题所在。