html网页阴影效果在ie和其他浏览器上不一样

在谷歌浏览器上

在ie浏览器上

我的ie版本 ie11

div的阴影没有扩散模糊。

这是我的代码

-------------------------------------------------------------------------------

在后面测试中又发现在ie10以下的版本z-index属性也不起作用了。顶部被上面的图片遮挡了一部分

ie和谷歌游览器的内核不一样，渲染方式不同，这些css的显示样式会不同，这个很正常，一般需要做适配，判断是那个游览器然后加载不同的css样式用于展示，以达到相同的展示效果。ie停止更新蛮久的了，很多新的css样式的不怎么支持。

这个不同浏览器的效果就是不太一致的，没什么办法

要完全一致做成图片形式了。。png来实现。

IE浏览器和谷歌流浪器的内核是不一样的，对CSS的一些样式支持也不同，所以CSS样式在不同浏览器下肯定效果是不一样的。

一般两种方法来解决。

1、找项目组的美工，让美工直接做有阴影效果的图片（png格式），到时候直接调用图片就行了。

这样做的好处很明显，那就是这样就不用担心换任何浏览器和浏览器的任何版本了，尤其是IE浏览器那繁多的版本很吐血。

只要是浏览器都一个效果，很稳定。

缺点么，当然需要美工配合了。

2、在CSS中判断不同浏览器来用不同CSS或者做两个适配不同浏览器的css，反正一个意思了。

如果是谷歌核心的浏览器，那就用针对谷歌核心的CSS，如果是IE核心的浏览器那就用针对IE核心的CSS。

好处是自己写个判断语句就能完成，自己动手丰衣足食。

缺点么……IE不同版本，其他核心浏览器（用的比较少）下还是会有问题。

---

我一般习惯是如果只有一处一个图片或者几个图片那让美工做一下，如果要很多的话，最好还是代码实现。

具体选哪个需要你自己根据实际情况决定一下了。