Question

我在页面底部有这个代码，可以按比例将一些图像放在页面上。它在Firefox和Chrome中运行良好，但在IE中却没有。它确实在IE中执行fadeIn(2000);但它不会移动图像。这是IE漏洞吗？有什么建议吗？

    <script>
        jQuery.noConflict();
        $j(window).load(
function () {

    $j('#featured img').each(
    function () {
        var theWidth = $j(this).width();
        var theHeight = $j(this).height();

        $j(this).css({ 'margin-top': -theHeight / 2 + 'px', 
                       'margin-left': -theWidth / 2 + 'px' });
    });
    $j("#featured img").fadeIn(2000);
});

修改

 <div id="featured"><a href="mysite.com" target="_blank"><img src="myimage.jpg" id="Image38" /></a></div>
    <div style="clear: both;"></div>
    <div style="background-color: #e4e4e4; margin-top: 20px;">
    <div id="featured"><a href="mysite.com" target="_blank"><img src="myimage.gif" id="Image1" /></a></div>
    <div style="clear: both;"></div>
    <div id="featured"><img src="myimage.jpg" id="Image2"  /></div>
    <div style="clear: both;"></div>

Answer 1

似乎在我的IE / FF / CHROME中工作正常......请参阅：http://jsfiddle.net/2QCFM/

$('#featured img').each(
function () {
    var theWidth = $(this).width();
    var theHeight = $(this).height();

    $(this).css({ 'margin-top': -theHeight / 2 + 'px',
                   'margin-left': -theWidth / 2 + 'px' });
    alert('width:' + theWidth + ' height:'+ theHeight);
});
$("#featured img").fadeIn(2000);

Answer 2

我只是查看了IE调试器，并为theWidth表示未定义。

听起来像 .load()事件在加载目标图像之前过早地触发。我有各种各样的问题让IE可靠地工作。

我发现如果图像设置为display:none;，IE中的.load()事件似乎完全忽略它。对于IE，display:none表示就load()事件而言图像不存在。

我看不到您的CSS代码，但由于您正在进行fadeIn()，我只能假设您在CSS中将图像设置为display:none。

我通过从CSS中删除display:none并在.load()事件后立即在jQuery中设置.css({'display':'none'})来修复我的IE情况。

试试这个，（但你可能不得不在你想要的地方玩.css({'display':'none'})）：

$j(window).load(function () {
    $j('#featured img').css({'display':'none'}); // <- set within jQ instead of CSS so IE can see image upon initial window.load().
    $j('#featured img').each(function () {

        function () {
            var theWidth = $j(this).width();
            var theHeight = $j(this).height();

            $j(this).css({ 'margin-top': -theHeight / 2 + 'px', 
                           'margin-left': -theWidth / 2 + 'px' });
     });
     $j("#featured img").fadeIn(2000);
});

IE Bug - 尝试获取图像的宽度/高度，并将其保留为margin-top和margin-left

2 个答案: