Question

我想有一个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中不起作用的任何建议？

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

Answer 1

不要使用风格

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

这在IE中不起作用

使用 ng-style

<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/

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

1 个答案: