FancyBox iFrame在IE中的表格和样式后坏掉了

我想知道是否有关于使用和设置'fancybox'窗口的特殊规则。我已经实现了一个使用iFrame调用的'fancybox' - 当我只有一些简单的文本，背景颜色和图像时;它呈现出很棒的IE 6+。但是，现在我已经添加了一个简单的表格，其中包含一些按钮样式 - 它以6/7为单位打破。FancyBox iFrame在IE中的表格和样式后坏掉了

任何特别的东西我应该避免实现并把一个名为.html的iFrame放在里面，同时使用支持IE6/7的fancybox？

！更新（请帮我调试 - 这里是我已经被称为在使用iFrame的的fancybox）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 

<style> 

h1 { font-family: Georgia, Regular; font-size: 30px; color: #8E4925; font-weight: 300;} 
h2 { font-family: Georgia, Regular; font-size: 18px; color: #8E4925; line-height: 30px; font-weight: 300; text-transform:Uppercase;} 
p { font-family: Georgia, Regular; font-size: 16px; color: #000; padding: 4px; line-height: 25px; font-weight: 300; } 

</style> 

</head> 

<body style="background-color: #FFFDEF;"> 

<div id="wrap" style="width:650px;"> 

<div style="float:left; width: 300px;"> 



<table width="300" height="30"> 
    <tr> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    </tr> 
    <tr> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    </tr> 
</table> 


<table width="300" height="30" > 
    <tr> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    </tr> 
    <tr> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    </tr> 
</table> 


<br /> 


<table width="300" height="30"> 
    <tr> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    <td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td> 
    </tr> 
</table> 



</div> 

<div style="float:right; width: 300px"> 

<img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/Cover.jpg" style="border:0px; margin-top:40px;"/> 


</div> 
</div> 

     <!-- SiteCatalyst Code version: H.17. 
Copyright 1997-2008 Omniture, Inc. More info available at 
http://www.omniture.com --> 
<script language="JavaScript" type="text/javascript" src="http://www.mytest.com/js/s_code.js"></script> 
<script language="JavaScript" type="text/javascript"><!-- 
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/ 
var s_code=s.t();if(s_code)document.write(s_code)//--></script> 
<script language="JavaScript" type="text/javascript"><!-- 
if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'\!-'+'-') 
//--></script><noscript><a href="http://www.omniture.com" title="Web Analytics"><img 
src="http://code.mytest.com/b/ss/ranhrollup/1/H.17--NS/0" 
height="1" width="1"style="border:3px solid #FFFDEF; alt="" /></a></noscript><!--/DO NOT REMOVE/--> 
<!-- End SiteCatalyst code version: H.17. --> 



</body> 
</html>

的fancybox JS在线：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 


<link rel="stylesheet" href="css/jquery.ui.all.css"> 

<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.mousewheel-3.0.4.pack.js"> 
</script> 
<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.pack.js"> 
</script> 

<link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.css" media="screen"> 

<!--JS for Fancybox iFrame buybtn--> 

<script type="text/javascript"> 
       $(document).ready(function() { 
         /* 
         * Examples - various 
         */ 
          $("#various7").fancybox({ 
           'width'       : 700, 
           'height'      : 500, 
           'autoScale'      : false, 
           'transitionIn'   : 'elastic', 
           'transitionOut'   : 'fade', 
           'enableEscapeButton' : 'true', 
           'type'     : 'iframe', 
           'speedIn'    : 250, 
           'speedOut'    : 500, 


         }); 

       }); 
</script> 

<!--End JS for Fancybox iFrame buybtn-->

CTA：

<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.randomhouse.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" border="0"></a>

来源

2012-01-10 Fred Randall

究竟是打破什么包装箱问题？内容是否仍在加载，但无法正确显示？或者根本没有加载任何东西？我在Mac上，所以我没有IE来看看，但我可以帮忙。 – 2012-01-10 22:39:46

感谢您的回应！它实际上并不是IE中的'fanyboxing'。它只是链接到.html页面（我正在使用iFrame fancybox）。 – 2012-01-11 02:48:36

删除上次API选项后的最后一个试用逗号

'speedOut': 500, //<-- remove this comma

与IE

来源

2012-01-10 23:19:18 JFK

你是认真的吗？哇，谢谢你 - 我会在早上上班的时候插上它！ – 2012-01-10 23:58:40

我应该在每次尝试后删除逗号吗？宽度和高度？ – 2012-01-10 23:59:25

nope，逗号是分隔对方的选项。如果你设置了最后一个逗号，那么IE期待另一个选项（并在之后生成一个js错误）...所以只删除最后一个 – JFK 2012-01-11 02:19:28

FancyBox iFrame在IE中的表格和样式后坏掉了

回答

相关问题