通过 JQuery 添加 CSS 在 IE 上不起作用答案

【问题标题】：Adding CSS via JQuery not working on IE通过 JQuery 添加 CSS 在 IE 上不起作用
【发布时间】：2014-01-16 05:41:50
【问题描述】：

我正在尝试使用此功能设置背景图像：

$('#frame').css('background-image','url(floorplans/img/selectors/floorplates-bg/'+floor+'.png)');

其中 floor 是一个包含 1-7 数字的变量。

它适用于 Chrome、Safari 和 Firefox。但是在 IE 上它没有设置背景图像。 .css(); 可以在 IE 上运行吗？

编辑：这是整个脚本：

$('#secondary-nav li').click(function(){
    var floor = $(this).attr('id').replace('f','');


    $('#frame').fadeOut(200);
    $('#secondary-nav li').removeClass('current');

    var currentFloor = '';

    setTimeout(function() {
        currentFloor = '#f' + floor;

        $(currentFloor).addClass('current');

        $('.units').css('display','none');

        var image = 'url(floorplans/img/selectors/floorplates-bg/'+floor+'.png)';


        $('#frame').css('background-image', image);


        $('#frame').fadeIn(200);
        $('#floor'+floor).fadeIn(200);
    }, 500);
});

// highlight on mouseover
 $(".units div a").hover(
        function(){
            $('img',this).stop().animate({'opacity':0},200);
         }, 
        function(){
            $('img',this).stop().animate({'opacity':1},200);
         }
 ); 




// display floorplan
$('.units div').each(function(i){
    var floor = $(this).parent().attr('id').replace('floor','');

    var unit = floor + $(this).attr('class').replace('u','');

    var details = $('a',this).attr('title');

    var group = $('a',this).attr('class').replace('i','');


    $(this).click(function(){
        $('#details .info h1').html('Unit '+unit);
        $('#details .info h2').html(details);
        $('#details .info a').attr('href','floorplans/downloads/'+group+'.pdf');
        $('#details .floorplate img').attr('src','floorplans/img/floorplans/floorplates/Unit-'+unit+'.png');
        $('#details .floorplan img').attr('src','floorplans/img/floorplans/'+group+'.png');
    });
    $(this).fancybox({'href':'#details'});
});

【问题讨论】：

这是一个延伸，但是：如果你将实际的 URL 用双引号括起来会怎样？
展示你的“地板”数学。可能是IE的计算问题
是的，.css() 在 IE 中工作。你用的是什么版本的jQuery？
永远不要在 IE 中使用console.log。删除它，将工作。
@user1671639,@sayra90 您可以在开发模式下使用console.log，前提是您记得在 IE 中测试时打开开发人员工具栏，console.log 只有在没有开发栏时才会终止处理打开

标签： javascript jquery css internet-explorer background-image

【解决方案1】：

您的问题确实无法预测。

但以下是我的假设：

(1) 生产 IE 时切勿使用console.log，控制台对象仅在为特定选项卡打开开发人员工具时才会暴露。

所以删除你的console.log。

(2) 你指的是正确的文件夹路径吗？

(3) 通常文件路径以/ 为前缀。所以也许这会导致问题。

(4) 最好有这样的东西：

var imageUrl = 'floorplans/img/selectors/floorplates-bg/'+floor+'.png';   
$('#frame').css('background-image',imageUrl);

希望你的问题应该存在。

【讨论】：

我已经改变了，仍然没有骰子。也许问题来自函数中的其他地方，但我对此表示怀疑。当我悬停时，它显示 #frame 背景图像尚未更新，这是唯一设置它的部分。
@sayra90 您是否在floor 中获得了正确的价值？即，您的image name === floor
是的，我什至记录下来检查。我的意思是它适用于 chrome、safari 和 firefox。楼层的值确实与实际楼层相对应。
你确定图片真的是PNG吗？如果图像不是真正的 PNG，而是例如扩展名更改为 PNG 的 JPEG 图像，IE 会在渲染图像时出现问题。
让我检查一下。我没有对此进行任何编程，但加入了，现在我负责调试它......显然没有做得最好

【解决方案2】：

尝试将toString() 函数添加到您的可变楼层。当我遇到完全相同的问题时，它对我有用；-)

【讨论】：