AngularJS 的 Internet Explorer 背景位置和背景大小答案

【问题标题】：Internet explorer background-position and background-size by AngularJSAngularJS 的 Internet Explorer 背景位置和背景大小
【发布时间】：2014-08-22 17:07:17
【问题描述】：

我想要一个 div，其中包含一个按比例缩小并对齐的大图像，类似于下面的 JsFiddle。下面的 jsfiddle 在 Chrome、Firefox 和 IE10 中适用于我。

    .backg{
    background-image:url('http://www.libpng.org/pub/png/img_png/pnglogo-blk.png');
    background-repeat:no-repeat;
    background-position:50px 50px;   
    background-size:80%;
    height: 400px;
    width: 400px;
    border: 1px solid #000;
    padding: 5px;
 }

http://jsfiddle.net/3sszy56z/

当我在我的项目中的本地机器上运行相同的代码时，背景大小和背景位置属性受到尊重并且可以正常工作。

但是如果我尝试使用 AngularJs $scope 变量设置这些值，它在 IE10 中不起作用，Firefox 和 Chrome 仍然可以正常工作。我的代码如下所示：

   <div style="width: 500px;
        height:400px;
        border:1px solid #b8b8b8;
        overflow:hidden;
        background-image:url('../../images/06.png');
        background-repeat:no-repeat;
        background-position:{{panhorizontal}}px {{panvertical}}px;
        background-size: {{zoom}}%;">
   </div>

关于为什么这仅在 IE 中不起作用的任何建议？

这是一个带有 Angular 的 JSFiddle 示例：http://jsfiddle.net/Lgrc9fj1/

【问题讨论】：

标签： html css angularjs internet-explorer

【解决方案1】：

不要使用风格

<div style="***">
</div>

这在 IE 中不起作用

使用 ng 风格

<div ng-style="{'width': '500px',
'height':'400px',
'border':'1px solid #b8b8b8',
'background-image':'url(http://www.libpng.org/pub/png/img_png/pnglogo-blk.png)',
'background-position-x':panhorizontal+'px',
'background-position-y':panvertical+'px',
'background-size': zoom+'%',
'overflow':'hidden',
'background-repeat':'no-repeat',    
'float':'left'}"></div>

这里是修改后的 JSfiddle

http://jsfiddle.net/Lgrc9fj1/4/

【讨论】：

谢谢，效果很好。但我还想做的另一件事是更改这些范围变量并更新图像。我更新了 jsfiddle 来说明这一点：jsfiddle.net/Lgrc9fj1/3 关于如何解决这个问题的任何建议？
谢谢！像魅力一样工作！