为什么这个CSS在框架/环境/浏览器中的应用不一致？ [英] Why is this CSS being applied inconsistently across frameworks/environments/browsers?

问题描述

我在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;
}

（我使用红色只是为了清楚地显示）

< br $>
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在框架/环境/浏览器中的应用不一致？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！