FancyBox iFrame сломался после таблиц и стилей в IE - PullRequest
Новая
       4

FancyBox iFrame сломался после таблиц и стилей в IE

0 голосов
/ 11 января 2012

Мне интересно, есть ли какие-то особые правила в отношении использования и стилизации окон 'fancybox'. Я реализовал 'fancybox', используя вызов iFrame - и когда у меня был простой текст, цвет фона и изображение; это сделало отличный IE 6+. НО, теперь, когда я добавил простую таблицу с несколькими стилями для кнопок внутри - она ​​разбивается на 6/7.

Что-нибудь конкретное, что мне следует избегать реализации и размещения внутри iFrame с именем .html при использовании fancybox, поддерживающего IE6 / 7?

! Обновление (пожалуйста, помогите мне отладить - вот что мне звонили в fancybox через iFrame): 

<!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 inline: 

<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>

1 Ответ

1 голос
/ 11 января 2012

удалить последнюю запятую после последней опции API 

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

, которая решает проблему с IE

...