[分享]css不兼容360浏览器

在CSS样式设计中，我们经常会遇到一些浏览器兼容性的问题。特别是像360浏览器这样的国产浏览器，在样式兼容上经常会有问题。CSS样式不兼容360浏览器，可能会导致网页排版混乱、样式错乱、布局失效等不良...

在CSS样式设计中，我们经常会遇到一些浏览器兼容性的问题。特别是像360浏览器这样的国产浏览器，在样式兼容上经常会有问题。

CSS样式不兼容360浏览器，可能会导致网页排版混乱、样式错乱、布局失效等不良后果。下面我们就来探讨一下常见的CSS样式在360浏览器下的兼容性问题以及解决方法。

.box{
   -webkit-box-shadow: 2px 2px 4px #888;
   -moz-box-shadow: 2px 2px 4px #888;
   box-shadow: 2px 2px 4px #888;
} 

在这个例子中，我们使用了CSS3中的box-shadow属性来实现一个盒子的阴影效果。但是，因为不同浏览器对box-shadow的支持不一样，我们需要使用带有前缀的属性来确保在各个浏览器中都能正确呈现。然而，在360浏览器中，box-shadow属性的兼容性仍然存在一定的问题。我们可以使用一些小技巧来解决这个问题。

首先，我们可以尝试使用filter属性来实现阴影效果:

.box{
   filter:progid:DXImageTransform.Microsoft.Shadow(color='#888', Direction=135, Strength=4);
} 

这种方法虽然可以在360浏览器中正常显示，但是它只能实现非常基础的阴影效果，无法实现更加高级的阴影效果。因此，我们还可以进一步使用JavaScript来兼容360浏览器。

var ua = navigator.userAgent.toLowerCase();
if(/360se/.test(ua)){
   $('.box').css('-webkit-box-shadow', '2px 2px 4px #888');
   $('.box').css('-moz-box-shadow', '2px 2px 4px #888');
   $('.box').css('box-shadow', '2px 2px 4px #888');
} 

上面这段JavaScript代码可以判断用户是否使用了360浏览器，如果是，则通过JavaScript给box元素设置对应的带有前缀的box-shadow属性。这个方法的优点是可以非常精确地兼容360浏览器，缺点是需要更多的代码量。

总之，CSS样式在360浏览器中的兼容性问题，是我们在设计网页样式时必须要注意的一个问题。在具体使用时，我们可以通过使用带有前缀的属性、使用filter属性或者使用JavaScript来进行兼容性处理。