css3媒体查询js与fancybox冲突
我正试图将谷歌代码中的css3媒体查询js与fancybox结合使用 由于某些原因,它们仅在Internet explorer 9和10中存在冲突。Ie8与Google Chrome和Mozilla Firefox一样运行良好 @当我使用CSS3 media queries javascript插件并单击fancybox弹出窗口时,fancybox弹出窗口为空。它显示弹出窗口,但里面没有内容。当我点击fancybox弹出窗口时,激活fancybox的原始布局会变为缩放(巨大),而弹出窗口的宽度/高度是正确的 当我删除css3媒体查询时,一切又恢复正常。谢谢你的帮助 以下是布局文件夹中my magento的page.xml中使用的所有脚本:css3媒体查询js与fancybox冲突,css,plugins,fancybox,media-queries,Css,Plugins,Fancybox,Media Queries,我正试图将谷歌代码中的css3媒体查询js与fancybox结合使用 由于某些原因,它们仅在Internet explorer 9和10中存在冲突。Ie8与Google Chrome和Mozilla Firefox一样运行良好 @当我使用CSS3 media queries javascript插件并单击fancybox弹出窗口时,fancybox弹出窗口为空。它显示弹出窗口,但里面没有内容。当我点击fancybox弹出窗口时,激活fancybox的原始布局会变为缩放(巨大),而弹出窗口的宽度/
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>js/jquery/jquery-1.9.1.js</script></action>
<action method="addJs"><script>js/jquery/no_conflict.js</script></action>
<action method="addJs"><script>js/vendor/modernizr-2.6.2-respond-1.1.0.min.js</script></action>
<action method="addJs"><script>js/jquery.lazyload.js</script></action>
<action method="addJs"><script>js/loadlazy.js</script></action>
<action method="addJs"><script>js/vendor/bootstrap.js</script></action>
<action method="addJs"><script>js/jquery.cookie.js</script></action>
<action method="addJs"><script>js/jquery.fancybox.pack.js</script></action>
<action method="addJs"><script>js/jquery.fancybox-media.js</script></action>
<action method="addJs"><script>js/jquery-ias.js</script></action>
<action method="addJs"><script>js/ias-load.js</script></action>
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action method="addCss"><stylesheet>css/bootstrap-modal.css</stylesheet></action>
<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
<action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
<action method="addJs"><script>js/css3-mediaqueries.js</script></action>
</block>
这就是我所做的,我不认为还有任何其他与冲突相关的问题,但如果你知道任何问题,请让我知道,我会发布。谢谢。如果你能展示你的代码,并为这个问题设置一个实例,比如一个JSFIDLE,那就太好了。我正在将magento与fancybox结合使用,css3媒体查询js只需要包含进去就可以了。我会编辑我的帖子,这样我就可以显示正在使用的可能有冲突的脚本。基本上我只包含css3媒体查询js,没有任何特定的调用。谢谢你的快速回复。
$jq191(".product-popup").fancybox({
fitToView : true,
padding: 15,
maxWidth : browserWidth-25,
maxHeight : browserHeight-25,
width : '100%',
height : '100%',
autoSize : false,
autoResize : false,
autoCenter : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
type: 'iframe',
helpers : { overlay : { locked : false
} },
afterShow : function(){
var marginPercentage= 0.0706955530216648*2;
viewWidth= browserWidth - marginPercentage*browserWidth;
$jq191( '.product-view' ).width( viewWidth+'px');
}
});