jquery globalcss IE不透明度

我正在使用jquery globalcss插件来更改全局样式表。 它不处理不透明度和IE。

我一直试图让它运转起来没有运气。 这是我试图强制插件尝试理解IE风格的不透明度。

function changeCss (property, value, target) { if (property === "opacity") { $(target).globalcss("filter","alpha(opacity="+value*100+")"); /* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */ $(target).globalcss("-MS-filter","\"progid:DXImageTransform.Microsoft.Alpha(Opacity="+value*100+")\""); } $(target).globalcss(property,value); } 

等等。 如果有人可以提供帮助，那就太好了。 谢谢。

我在这里粘贴插件，因为它不再在原始网站上：

 /* * Global Stylesheet jQuery Plugin * Version: 0.1 * * Enables CSS modification that uses a 'global' stylesheet, rather than inline CSS. * * Copyright (c) 2009 Jeremy Shipman (http://www.burnbright.co.nz) * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * INSTRUCTIONS: * use in the same way as the jQuery css function. Eg: * $("some selector").globalcss("style","value"); * * use the globalsetylesheet.print() function to return a string of the global stylesheet */ (function($) { //global singleton class for globalstylesheet = new function globalStylesheet(){ if(!document.styleSheets){ alert("document.Stylesheets not found"); return false; } var sheet = null; var setrules = Array(); // rule cache //set up a dummy noded var cssNode = document.createElement('style'); cssNode.type = 'text/css'; cssNode.rel = 'stylesheet'; cssNode.media = 'screen'; cssNode.title = 'globalStyleSheet'; document.getElementsByTagName("head")[0].appendChild(cssNode); //find the newly created stylesheet and store reference for(var i = 0; i < document.styleSheets.length; i++){ if(document.styleSheets[i].title == "globalStyleSheet"){ sheet = document.styleSheets[i]; } } //set a CSS rule this.setRule = function setRule(selector,ruleText){ if(setrules[selector] != undefined){ return setrules[selector]; }else{ if(sheet.addRule){ // IE sheet.addRule(selector,ruleText,0); }else{ sheet.insertRule(selector+'{'+ruleText+'}',0); } setrules[selector] = this.getRule(selector); } return setrules[selector]; } //get a saved CSS rule this.getRule = function getRule(selector){ if(setrules[selector] != undefined){ return setrules[selector]; }else{ var rules = allRules(); for(var i = 0; i < rules.length; i++){ if(rules[i].selectorText == selector){ return rules[i]; } } } return false; } //helper function to get all rules function allRules(){ if(sheet.cssRules){ //IE return sheet.cssRules; }else{ return sheet.rules; } } //print out the stylesheet this.print = function print(){ var styleinfo = ""; var rules = allRules(); for(var i = 0; i < rules.length; i++){ styleinfo+= rules[i].cssText+"\n" } return styleinfo; } //use jQuery's css selector function to set the style object this.css = function css(jquery,key,value){ rule = this.setRule(jquery.selector,key+":"+value+";"); jQuery(rule).css(key,value); } } //hook new function into jQuery jQuery.fn.extend({ globalcss : function globalcss(key,value){ globalstylesheet.css(this,key,value); } }); })(jQuery); 

编辑：我创建了一个jsbin现场演示。 请在不同的浏览器中比较。 http://jsbin.com/iqadu/edit

Answer 1

更新：

我下面的第一个想法不是问题。 事实certificate问题更多的是行人：确保在浮点数小于1之前加零。也许这是因为javascript如何处理字符串值到数字的转换？ 无论如何，在“.5”之前添加零来解决问题。

  // works var property = "opacity"; var value = "0.5"; var target = ".transparency"; // doesn't work var property = "opacity"; var value = ".5"; var target = ".transparency"; 

在这里查看工作代码： http ： //jsbin.com/ikore3 。 顺便说一下，你的原始演示页面有一个javascript问题，大括号在错误的地方。 我也修好了。

以下是造成这种情况的原始想法 – 不是问题所在

您可能遇到了与jquery无关的IE的怪癖：为了使opacity无效，元素必须具有“ 布局 ”，这是一个特定于IE的布尔状态，由CSS触发，如高度，宽度，缩放等等。如果元素没有“布局”，那么不透明度将不起作用。

解决方法是向元素添加特定的CSS以使其“布局”。 不确定这是否是你的情况下发生的事情，但通过添加一个提供布局的CSS属性并查看问题是否消失来检查是很容易的。

来自http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/ ：

但仅仅在IE中设置filter/不透明度值是不够的。 事实certificate，IE需要定位元素才能使滤镜/不透明度起作用。 如果你的元素没有位置，可以通过在CSS中添加“zoom：1”来解决这个问题。 还有其他的黑客可以解决这个问题，缩放是我选择的那个，它似乎运作得很好。

在JavaScript中，您可以通过检查element.currentStyle.hasLayout来查明IE中的元素是否具有位置组件。 如果hasLayout为false，则该元素没有CSS定位。

如果您想了解有关此问题的更多信息，请参阅阅读清单以获取您的信息：

◦探索OpacityStep-by-Step [已损坏的链接]

◦ 进行布局

◦Opacity@ QuirksMode

使用您的代码，这是确保如何测试这是否是您的问题的一种可行方法：

 function changeCss (property, value, target) { if (property === "opacity") { $(target).globalcss("filter","alpha(opacity="+value*100+")"); /* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */ $(target).globalcss("-MS-filter","\"progid:DXImageTransform.Microsoft.Alpha(Opacity="+value*100+")\""); $(target).globalcss("zoom","1"); // ensure the target has layout } $(target).globalcss(property,value); } 

更复杂的版本会检查是否已经存在缩放，只有在缺少时才添加它。 您还可以检查hasLayout属性，只有在它为false时才设置缩放，只要您防止hasLayout根本不存在的非IE情况。

如果这不能解决问题，您是否可以发布HTML示例或URL，以便我们可以重新解决问题，从而更容易建议修复？ 谢谢！