为什么这个CSS在框架/环境/浏览器中的应用不一致？

本文介绍了为什么这个CSS在框架/环境/浏览器中的应用不一致？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我在Meteor中创建了一个原型，其中CSS / jQuery可以很好地创建阴影效果并在各种图像悬停时添加边框;特别是，在Meteor原型中（它是一个Sharepoint应用程序，但使用Meteor测试这样的功能要快得多）我有这个CSS： I've got a prototype created in Meteor where the CSS / jQuery works fine in creating a shadow effect and adding a border to various images as they are hovered; specifically, in the Meteor prototype (it's a Sharepoint app, but testing features like this out is much quicker with Meteor) I have this CSS:.addshadow {z-index: 4;-moz-box-shadow: 0 0 7px #000;-webkit-box-shadow: 0 0 7px #000;box-shadow: 0 0 7px #000;}.addborder { border: 1px solid gold;} ......这个jQuery： ...and this jQuery:Template.postTravelSection0.events({ 'mouseenter #imgPostTravelTop': function() { $('#imgPostTravelTop').addClass('addborder'); $('#imgPostTravelTop').addClass('addshadow'); }, 'mouseleave #imgPostTravelTop': function() { $('#imgPostTravelTop').removeClass('addborder'); $('#imgPostTravelTop').removeClass('addshadow'); }, . . .}); 它在Meteor生成的页面上运行正常 - 在mouseenter / hovering into a image中，它变得金黄色五个O'Clock阴影，并且在mouseleave上它们被移除。 然而，在Sharepoint代码中几乎相同： CSS： It works fine on my Meteor-generated page -- on mouseenter / hovering into an image, it grows a golden five O'Clock shadow, and on mouseleave they are removed.However, virtually the same thing in the Sharepoint code:CSS:.finaff-form-help-shadow {z-index: 4;-moz-box-shadow: 0 0 7px #000;-webkit-box-shadow: 0 0 7px #000;box-shadow: 0 0 7px #000;}.finaff-form-help-addborder { border: 1px solid red;} （我使用红色只是为了清楚地显示） jQuery： (I used red just so that it will show up clearly)jQuery:$( "#imgPostTravelTopLeft, #imgPostTravelTopRight, #imgPostTravelCenter, #imgPostTravelBottom" ).hover(function() { $(this).addClass('finaff-form-help-addborder'); $(this).addClass('finaff-form-help-shadow'); }, function() { $(this).removeClass('finaff-form-help-addborder'); $(this).removeClass('finaff-form-help-shadow'); }); ...有不同的效果，例如： IE8：没什么 - 没有阴影，没有边框 Firefox：阴影但没有边框 Chrome：阴影但没有边框 推荐答案 （'＃imgPostTravelTop'）。addClass（'addborder'）; ('#imgPostTravelTop').addClass('addborder'); ('#imgPostTravelTop').addClass('addshadow'）; }，'mouseleave #imgPostTravelTop'：function（）{('#imgPostTravelTop').addClass('addshadow'); }, 'mouseleave #imgPostTravelTop': function() { （'＃imgPostTravelTop'）。removeClass（'addborder'）; ('#imgPostTravelTop').removeClass('addborder'); 这篇关于为什么这个CSS在框架/环境/浏览器中的应用不一致？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！