未正确分配为 IE8 添加动态“过滤器”CSS 属性答案

【问题标题】：Adding dynamic 'filter' CSS property for IE8 isn't being correctly assigned未正确分配为 IE8 添加动态“过滤器”CSS 属性
【发布时间】：2014-11-04 12:26:21
【问题描述】：

如果显示页面的浏览器是 IE8 或 IE9，我正在尝试将以下 CSS 属性分配给我网页中的 DIV，以解决不支持 background-size 属性的问题。我已经嗅探了浏览器，我的 DIV 背景图像的值是动态的，这意味着它会随着选择事件的变化而变化。这是我的代码

// var msieVersion is determined earlier and this is in a nested condition
// to check if the browser is IE

if (msieVersion === 8 || msieVersion === 9) {

 // use jQuery to assign the dynamic CSS property and change the BG image source
 $("#container").css({ "filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src +  "',sizingMethod='scale')", "-ms-filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src +  "', sizingMethod='scale')"});

}

现在，当我使用 IE 开发工具检查元素时，filter 似乎没有被应用。在格式选项卡中列出了以下内联样式（我已更改的 href 但它是正确且有效的）：

background-image:url(http://url/img1/1.jpg); FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://url/img1/1.jpg',sizingMethod='scale'); msFilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://url/img1/1.jpg', sizingMethod='scale')

有谁知道我如何动态分配这个属性（src 值改变这不能在我的样式表中）或者他们能发现我做错了什么吗？

【问题讨论】：

你看过this question吗？
不，但我决定在头部修改一个似乎有效的样式标签

标签： javascript jquery html css internet-explorer-8

【解决方案1】：

在页面头部添加一个 Style 标签似乎已经解决了这个问题：

if (msieVersion === 8 || msieVersion === 9) {
            $('head').append("<style>" +
                "#container {" +
                "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale');" +
                "-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src +  "', sizingMethod='scale')" +
                "}" +
                "</style>");
        }

【讨论】：