Firefox中的$ .css（）问题

我有这种情况，我想调用某个依赖于点击值的元素。当链接包含图像我想要显示图像，否则我想加载一个HTML页面。当HTML页面被加载时，我已经设计了这个栏来关闭不同的东西，就好像图像被加载一样。说我有这个CSS（这是一个HTML页面加载时的样式）

#shadow,#shadowRoute { position:fixed;left:0;top:0;width:100%;height:100%;z-index:500;background:black;opacity:0.8; } 
#shadowContent,#shadowContentRoute { position:fixed;z-index:550;background:white;padding:25px; } 
#closebar,#closebarRoute { text-align:right;background:#ebdfd3;width:740px;padding:5px;height:25px;text-transform:uppercase; } 
#content,#contentRoute { margin-top:25px;width:750px;height:450px;overflow:auto; } 
#imageSelectPrevious { position:absolute;left:0;top:45px;width:80px;z-index:600; } 
#imageSelectNext { position:absolute;right:0;top:45px;width:80px;z-index:600; } 
.imageNavLink { display:block;text-indent:-9999px; }

我使用下面的代码来显示加载图像。这工作得很好，除了在样式表中定义的背景颜色样式的closebar。

$("#shadow").add($("#shadowContent")).fadeIn(500);  
$("#shadowContent").animate({width:'250px',height:'250px'},500).css({top:'25px',left:'50%',margin:'0 0 0 -125px',padding:'10px !important'}).empty().append('&lt;div id="closebar">&lt;a href="#close" id="closeBox">'+closeText+'&lt;/a>&lt;/div>').append('&lt;div id="content">&lt;/div>'); 
$("#closebar").animate({width:'250px'},500).css({background:'white !important',padding:'5px 0 !important'}); 
$("#closebar a").css({color:'#323232','font-weight':'bold',background:'url(http://www.cherrytrees.nl/tmp/Core/Images/closeIcon.jpg) left center no-repeat',padding:'0 0 0 20px'}); 
$("#content").animate({width:'230px',height:'230px'},500).css({margin:'0',padding:'90px'}).html("&lt;div id='imageSelectPrevious'>&lt;a href='#' id='prevImageLink' class='imageNavLink' title='' rel='prev'>Previous&lt;/a>&lt;/div>&lt;div id='imageSelectNext'>&lt;a href='#' id='nextImageLink' class='imageNavLink' title='' rel='next'>Next&lt;/a>&lt;/div>&lt;img id='popImageContainer' src='http://www.cherrytrees.nl/tmp/Core/Images/load.gif' style='margin:0'>&lt;/div>"); 
$("#prevImageLink").add($("#nextImageLink")).hide();

好吧，我现在有一些代码，检查图像，获取尺寸和一切。当图像被完全加载我运行下面的代码来改变容器的尺寸和显示图像

$("#shadowContent").animate({width:newWidth+'px',height:newHeight+'px'},500).css({top:'25px',left:'50%',margin:'0 0 0 -'+(newWidth/2)+'px !important'}); 
$("#content").animate({width:newWidth+'px',height:newHeight+'px'},500).css({margin:'0',padding:'0 !important'}); 
$("#closebar").animate({width:newWidth+'px'},500); 
$("#popImageContainer").css({padding:'0 !important'});

现在能正常工作在Chrome和Safari（IE未测试），但Firefox样式与#ebdfd3背景closebar ，以某种方式为图像添加填充，并调整容器元素的位置。

是的，样式表包含上述我的文档中的JavaScript

我真的没有一个线索做什么，考虑到它在Chrome和Safari的事实..没有任何人也许听说过关于这样的问题？

问题解决！ !important引起了问题！它现在工作正常！谢谢！

来源

2010-10-02 Maurice

单独使用代码非常困难，特别是因为您没有提供详细的错误信息。你可能需要显示一个实时链接 – 2010-10-02 14:25:21

另外，有什么让我觉得有问题的是'0！important'是非常重要的吗？ – 2010-10-02 14:26:54

是的，我不认为你可以在脚本中包含'！important'标志......至少我从来没有为我工作过。 – Mottie 2010-10-02 14:30:43

请勿使用!important：在这种情况下它不起作用。

来源

2010-10-02 16:54:39

Firefox中的$ .css（）问题

回答

相关问题