jquery 在 edge 的奇怪取值问题

这破主题做了 6 天了，其中有 4 天是修复这主题的 banner 的问题，因为在不同的浏览器中，`background-size` 的取值很有问题。在 Edge 和 chrome 中，两者取得不同值，导致主题的 banner 在 FF 和 chrome 是正常，但在 Edge 中，背景图却放大了 10 倍（浏览器兼容？我不太会弄啊...）。

我这主题的 banner 的特效是参考(复制)了 [Zoom and Blur background Image](https://codepen.io/zrichard/pen/wEFBd/) 的代码，在 chrome 和 firefox 是正常的，却在 edge 和 ie 中背景图放大了 10 倍多。 作者也谈到了这问题：

> In IE $([selector]).css('background-image') returns a pixel value even if your css is in percent. To fix, use a fixed number instead of the 'zoom' variable in this example.

大意就是在 IE 中，在 `$([selector]).css('background-image')` 中，如果元素用百分比赋值的话，会返回一个具体的像素值。请自己用具体的数字代替。

### 还原

js：
    zoom = $('.banner').css('background-size')
    
    css：
    .banner {
    	background-size : 110%;
    }

#### 在 chrome 中
![TIM截图20180526001734.jpg](https://cdn.lowb.ren/s/2018/05/1339298950.jpg)

可以获取到正常的百分比值

#### 在 Edge 中
![TIM截图20180526002029.jpg](https://cdn.lowb.ren/s/2018/05/3147863800.jpg)

直接取了计算好的值

### 不算解决的解决

#### 浏览器识别，模糊还原百分比
对于 edge 来说，如果想要还原百分比的话，需要再加上新计算。

zoom = $('.banner').css('background-size')
    zoom1 = parseFloat(zoom)/1000  //精准还原就看自己的计算能力了，大概还原应该就行了

#### 主题的解决
因为我要达到的目的是可以正常做到滚动的时候模糊并缩放的效果，那就从 div 的宽度和高度入手

zoom1 = $('.banner').css('padding-bottom')
    	zoom2 = parseFloat(zoom1)
    	zoom = $('.banner').width()
        size =  zoom + zoom2 * 1.5  ;

乘以 1.5 是防止在移动端出现空位，而且`background-size` 越大，滚动效果会比较明显，不会说滚动到一半就已经到头了。

## 那么，有大佬能解决这问题吗。
这也不能从根本解决问题啊....

## 其他
相反在 Vue 就能正常取值了..

![TIM截图201002029.jpg](https://cdn.lowb.ren/s/2018/05/1604400893.jpg)

![TIM截图20180526074734.jpg](https://cdn.lowb.ren/s/2018/05/3035651906.jpg)

评论已关闭