1. 首页
  2. 问答
  3. 奇怪的谷歌浏览器浮动错误 - 罚款在其他浏览器

奇怪的谷歌浏览器浮动错误 - 罚款在其他浏览器

2015-02-09 119 views
0

我遇到了一个奇怪的错误，我试图漂浮我的表格单元格（块级别和100％宽度），他们并排结束时，第一细胞行为正常。你正在寻找标题。奇怪的谷歌浏览器浮动错误 - 罚款在其他浏览器

我在使用表格，因为这是一封电子邮件。

在其他的浏览器，他们崩溃得很好，但在Chrome 桌面和移动他们不会！

Chrome float bug

我已经试过clearfixing细胞也...

http://jsfiddle.net/us600sos/ - 的jsfiddle显示它只是罚款，甚至在Chrome中。那是什么？！

http://news.yfish.co.uk/e/B3936E5E801047F09407600602EBA805/4/preview/ - 这里是你可以测试一下，看看错误的版本，说我爱你是在电子邮件中使用动画（响应向下）

<html> 
<head> 
<title>Template</title> 
<meta charset=utf-8> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style type="text/css"> 


    #outlook a { padding: 0; } 
    .ReadMsgBody { width: 100%; } .ExternalClass { width:100%; }     
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } 
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } 
    img { -ms-interpolation-mode: bicubic; } 
    body { margin: 0; padding: 0; } 
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; } 
    table { border-collapse: collapse!important; } 
    body { height: 100%!important; margin: 0; padding: 0; width: 100%!important; background-color: #ffffff; } 
    a:visited { color: #414141; } 

    @media screen { 
     @font-face { 
      font-family: 'humanst'; 
      src: url(humanist-521-bold.eot); /* IE9 Compat Modes */ 
      src: url(humanist-521-bold.woff) format('woff'), /* Modern Browsers */ 
       url(humanist-521-bold.ttf) format('truetype'), /* Safari, Android, iOS */ 
       url(humanist-521-bold.svg) format('svg'); /* Legacy iOS */ 
     } 

    } 

     .facebook, .twitter, .mail { 
      display: block; 
      border-radius: 100%; 
      overflow: visible; 
      -webkit-transition: all 1.2s ease; /* Safari and Chrome */ 
      -moz-transition: all 1.2s ease; /* Firefox */ 
      -ms-transition: all 1.2s ease; /* IE 9 */ 
      -o-transition: all 1.2s ease; /* Opera */ 
      transition: all 1.2s ease; 
      border: 2px solid #ffffff; 
     } 

     .facebook:hover { 
      background-color: #718fcb; 
      border: 2px solid #718fcb; 
     } 

     .twitter:hover { 
      background-color: #61c4e4; 
      border: 2px solid #61c4e4; 
     } 

     .mail:hover { 
      background-color: #bfbfbf; 
      border: 2px solid #bfbfbf; 
     } 

      .full-width-cell { 
     *zoom: 1; 
    } 

    .full-width-cell:before, 
    .full-width-cell:after { 
     display: table; 
     line-height: 0; 
     content: ""; 
    } 

    .full-width-cell:after { 
     clear: both; 
    } 

     /* Animated Fish */ 

     .swi { 
      -webkit-animation: fishSwim 10s ease 4s infinite; 
      -moz-animation: fishSwim 10s ease 4s infinite; 
      -o-animation:  fishSwim 10s ease 4s infinite; 
      animation:   fishSwim 10s ease 4s infinite; 
     } 

     @-webkit-keyframes fishSwim { 
      0% { -webkit-transform: translatex(0); } 
      20% { -webkit-transform: translatex(230px); } 
      20.1% { -webkit-transform: translatex(230px) scaleX(-1); } 
      50% { -webkit-transform: translatex(-180px) scaleX(-1); } 
      65% { -webkit-transform: translatex(-270px) scaleX(-1); } 
      65.1% { -webkit-transform: translatex(-270px) scaleX(1); } 
      100% { -webkit-transform: translatex(0) scaleX(1); } 
     } 

     @-moz-keyframes fishSwim { 
      0% { -moz-transform: translatex(0); } 
      20% { -moz-transform: translatex(230px); } 
      20.1% { -moz-transform: translatex(230px) scaleX(-1); } 
      50% { -moz-transform: translatex(-180px) scaleX(-1); } 
      65% { -moz-transform: translatex(-270px) scaleX(-1); } 
      65.1% { -moz-transform: translatex(-270px) scaleX(1); } 
      100% { -moz-transform: translatex(0) scaleX(1); } 
     } 

     @-o-keyframes fishSwim { 
      0% { -o-transform: translatex(0); } 
      20% { -o-transform: translatex(230px); } 
      20.1% { -o-transform: translatex(230px) scaleX(-1); } 
      50% { -o-transform: translatex(-180px) scaleX(-1); } 
      65% { -o-transform: translatex(-270px) scaleX(-1); } 
      65.1% { -o-transform: translatex(-270px) scaleX(1); } 
      100% { -o-transform: translatex(0) scaleX(1); } 
     } 

     @keyframes fishSwim { 
      0% { transform: translatex(0); } 
      20% { transform: translatex(230px); } 
      20.1% { transform: translatex(230px) scaleX(-1); } 
      50% { transform: translatex(-180px) scaleX(-1); } 
      65% { transform: translatex(-270px) scaleX(-1); } 
      65.1% { transform: translatex(-270px) scaleX(1); } 
      100% { transform: translatex(0) scaleX(1); } 
     } 

     /* Icons Fade Down */ 

     .facebook, .twitter, .mail { 
      -webkit-animation: fadeInDown 1.2s forwards; 
      -moz-animation: fadeInDown 1.2s forwards; 
      -o-animation: fadeInDown 1.2s forwards; 
      animation: fadeInDown 1.2s forwards; 
     } 

     @-webkit-keyframes fadeInDown { 
      0% {opacity: 0; -webkit-transform: translateY(-30px);} 
      40% {opacity: 0; -webkit-transform: translateY(-30px);} 
      100% {opacity: 1; -webkit-transform: translateY(0);} 
     } 

     @-moz-keyframes fadeInDown { 
      0% {opacity: 0; -moz-transform: translateY(-30px);} 
      40% {opacity: 0; -moz-transform: translateY(-30px);} 
      100% {opacity: 1; -moz-transform: translateY(0);} 
     } 

     @-o-keyframes fadeInDown { 
      0% {opacity: 0; -o-transform: translateY(-30px);} 
      40% {opacity: 0; -o-transform: translateY(-30px);} 
      100% {opacity: 1; -o-transform: translateY(0);} 
     } 

     @keyframes fadeInDown { 
      0% {opacity: 0; transform: translateY(-30px);} 
      40% {opacity: 0; transform: translateY(-30px);} 
      100% {opacity: 1; transform: translateY(0);} 
     } 

     /* Title Fade */ 

     .fade { 
      -webkit-animation: fadeIn 2.5s ease forwards; 
      -moz-animation: fadeIn 2.5s ease forwards; 
      -o-animation:  fadeIn 2.5s ease forwards; 
      animation:   fadeIn 2.5s ease forwards; 
     } 

     @-webkit-keyframes fadeIn { 
      0% { opacity: 0; visibility: visible; } 
      50% { opacity: 0; visibility: visible; } 
      100 { opacity: 1; visibility: visible; } 
     } 
     @-moz-keyframes fadeIn { 
      0% { opacity: 0; visibility: visible; } 
      50% { opacity: 0; visibility: visible; } 
      100 { opacity: 1; visibility: visible; } 
     } 
     @-o-keyframes fadeIn { 
      0% { opacity: 0; visibility: visible; } 
      50% { opacity: 0; visibility: visible; } 
      100 { opacity: 1; visibility: visible; } 
     } 
     @keyframes fadeIn { 
      0% { opacity: 0; visibility: visible; } 
      50% { opacity: 0; visibility: visible; } 
      100 { opacity: 1; visibility: visible; } 
     } 

     /* Image fades */ 

     /* Left */ 

     .imgFadeInLeft { 
      -webkit-animation: fadeInLeft 3s forwards; 
      -moz-animation: fadeInLeft 3s forwards; 
      -o-animation: fadeInLeft 3s forwards; 
      animation: fadeInLeft 3s forwards; 
     } 

     @-webkit-keyframes fadeInLeft { 
      0% {opacity: 0; -webkit-transform: translateX(-50px);} 
      70% {opacity: 0; -webkit-transform: translateX(-50px);} 
      100% {opacity: 1; -webkit-transform: translateX(0);} 
     } 

     @-moz-keyframes fadeInLeft { 
      0% {opacity: 0; -moz-transform: translateX(-50px);} 
      70% {opacity: 0; -moz-transform: translateX(-50px);} 
      100% {opacity: 1; -moz-transform: translateX(0);} 
     } 

     @-o-keyframes fadeInLeft { 
      0% {opacity: 0; -o-transform: translateX(-50px);} 
      70% {opacity: 0; -o-transform: translateX(-50px);} 
      100% {opacity: 1; -o-transform: translateX(0);} 
     } 

     @keyframes fadeInLeft { 
      0% {opacity: 0; transform: translateX(-50px);} 
      70% {opacity: 0; transform: translateX(-50px);} 
      100% {opacity: 1; transform: translateX(0);} 
     } 

     /* Down */ 

     .imgFadeInDown { 
      -webkit-animation: imagefadeInDown 3s forwards; 
      -moz-animation: imagefadeInDown 3s forwards; 
      -o-animation: imagefadeInDown 3s forwards; 
      animation: imagefadeInDown 3s forwards; 
     } 

     @-webkit-keyframes imagefadeInDown { 
      0% {opacity: 0; -webkit-transform: translateY(-50px);} 
      70% {opacity: 0; -webkit-transform: translateY(-50px);} 
      100% {opacity: 1; -webkit-transform: translateY(0);} 
     } 

     @-moz-keyframes imagefadeInDown { 
      0% {opacity: 0; -moz-transform: translateY(-50px);} 
      70% {opacity: 0; -moz-transform: translateY(-50px);} 
      100% {opacity: 1; -moz-transform: translateY(0);} 
     } 

     @-o-keyframes imagefadeInDown { 
      0% {opacity: 0; -o-transform: translateY(-50px);} 
      70% {opacity: 0; -o-transform: translateY(-50px);} 
      100% {opacity: 1; -o-transform: translateY(0);} 
     } 

     @keyframes imagefadeInDown { 
      0% {opacity: 0; transform: translateY(-50px);} 
      70% {opacity: 0; transform: translateY(-50px);} 
      100% {opacity: 1; transform: translateY(0);} 
     } 

     /* Right */ 

     .imgFadeInRight { 
      -webkit-animation: imagefadeInRight 3s forwards; 
      -moz-animation: imagefadeRight 3s forwards; 
      -o-animation: imagefadeInRight 3s forwards; 
      animation: imagefadeInRight 3s forwards; 
     } 

     @-webkit-keyframes imagefadeInRight { 
      0% {opacity: 0; -webkit-transform: translateX(50px);} 
      70% {opacity: 0; -webkit-transform: translateX(50px);} 
      100% {opacity: 1; -webkit-transform: translateX(0);} 
     } 

     @-moz-keyframes imagefadeInRight { 
      0% {opacity: 0; -moz-transform: translateX(50px);} 
      70% {opacity: 0; -moz-transform: translateX(50px);} 
      100% {opacity: 1; -moz-transform: translateX(0);} 
     } 

     @-o-keyframes imagefadeInRight { 
      0% {opacity: 0; -o-transform: translateX(50px);} 
      70% {opacity: 0; -o-transform: translateX(50px);} 
      100% {opacity: 1; -o-transform: translateX(0);} 
     } 

     @keyframes imagefadeInRight { 
      0% {opacity: 0; transform: translateX(50px);} 
      70% {opacity: 0; transform: translateX(50px);} 
      100% {opacity: 1; transform: translateX(0);} 
     } 

     /* Up */ 

     .imgFadeInUp { 
      -webkit-animation: imagefadeInUp 3s forwards; 
      -moz-animation: imagefadeInUp 3s forwards; 
      -o-animation: imagefadeInUp 3s forwards; 
      animation: imagefadeInUp 3s forwards; 
     } 

     @-webkit-keyframes imagefadeInUp { 
      0% {opacity: 0; -webkit-transform: translateY(50px);} 
      70% {opacity: 0; -webkit-transform: translateY(50px);} 
      100% {opacity: 1; -webkit-transform: translateX(0);} 
     } 

     @-moz-keyframes imagefadeInUp { 
      0% {opacity: 0; -moz-transform: translateY(50px);} 
      70% {opacity: 0; -moz-transform: translateY(50px);} 
      100% {opacity: 1; -moz-transform: translateX(0);} 
     } 

     @-o-keyframes imagefadeInUp { 
      0% {opacity: 0; -o-transform: translateY(50px);} 
      70% {opacity: 0; -o-transform: translateY(50px);} 
      100% {opacity: 1; -o-transform: translateX(0);} 
     } 

     @keyframes imagefadeInUp { 
      0% {opacity: 0; transform: translateY(50px);} 
      70% {opacity: 0; transform: translateY(50px);} 
      100% {opacity: 1; transform: translateX(0);} 
     } 

     #zoom a { 
      display: block; 
      overflow: hidden!important; 
     } 

     #zoom img, .img-cell-one, .img-cell-two { 
      -webkit-transition: all 2s ease; /* Safari and Chrome */ 
      -moz-transition: all 2s ease; /* Firefox */ 
      -ms-transition: all 2s ease; /* IE 9 */ 
      -o-transition: all 2s ease; /* Opera */ 
      transition: all 2s ease; 
     } 

     #zoom img:hover { 
      -webkit-transform: scale(1.07); /* Safari and Chrome */ 
      -moz-transform: scale(1.07); /* Firefox */ 
      -ms-transform: scale(1.07); /* IE 9 */ 
      -o-transform: scale(1.07); /* Opera */ 
      transform: scale(1.07); 
     } 

     @media screen and (max-width: 740px), and screen (max-device-width: 740px) { 

      body { width: auto!important; } 
      table[class="full-width"] { display: block!important; width: 100%!important; } 
      td[class="full-width-cell"] { display: block!important; width: 100%!important; float: left!important; padding: 0!important; text-align: center!important; } 
      table[class="content-width"] { display: block!important; width: 96%!important; float: none!important; margin: 0 auto!important; } 
      img[id="title"] { width: 100%!important; height: auto!important; } 
      td[class="img-cell-one"] { width: 42%!important; float: left!important; display: block!important; } 
      td[class="img-cell-two"] { width: 58%!important; float: left!important; display: block!important; } 
      img[class="img-scale"] { width: 100%!important; height: auto!important; } 
      img[class="think-tank"] { float: none!important; margin: 0 auto!important; } 
      table[class="tagline-table"] { display: block!important; float: none!important; margin: 0 auto 20px auto!important; } 
      td[id="view-padding"] { padding-top: 20px!important; padding-bottom: 20px!important; } 
      table[class="social"] { display: block!important; margin: 0 auto!important; } 
      div[class="center-header"] { width: 100%!important; max-width: 357px!important; margin: 0 auto!important; } 
      td[id="featured-padding"] { padding: 0 20px 0 20px!important; } 
      td[id="title-cell"] { padding: 0 20px 0 20px!important; } 

      [class="mobile-hide"] { display: none!important; } 

     } 

     @media screen and (max-width: 520px), and screen (max-device-width: 520px) { 

      td[class="gallery-split"] { display: block!important; width: 50%!important; float: left!important; } 
      td[class="img-cell-one"] { width: 100%!important; float: left!important; display: block!important; } 
      div[class="gallery"] { overflow: hidden!important; width: 100%; max-width: 480px; margin: 0 auto!important; } 
      td[class="img-cell-two"] { width: 100%!important; clear: both!important; display: block!important; } 
      div[class="gallery-bottom"] { width: 100%!important; float: right!important; } 
      [class="block"] { display: block!important; width: 100%!important; } 
      div[class="img-large"] { max-height: 150px; overflow: hidden; } 
      td[id="gallery-clear"] { clear: both!important; } 

      .img-cell-one, .img-cell-two { 
       -webkit-transition: all 1s ease; /* Safari and Chrome */ 
       -moz-transition: all 1s ease; /* Firefox */ 
       -ms-transition: all 1s ease; /* IE 9 */ 
       -o-transition: all 1s ease; /* Opera */ 
       transition: all 1s ease; 
      } 
     } 

</style> 
</head> 
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="#ffffff"> 

    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#fec10d" style="background-color: #fec10d;"><!-- wrapper --> 
     <tr> 
      <td bgcolor="#fec10d"> 

       <table width="100%" cellpadding="0" cellspacing="0" border="0"> 
        <tr> 
         <td valign="top" class="full-width-cell"> 

          <div class="center-header"><!-- ISSUE STARTS HERE--> 
          <table width="99%" cellpadding="0" cellspacing="0" border="0" align="left" class="full-width"><!-- header --> 
           <tr class="block"> 
            <td height="25">&nbsp; 

            </td> 
           </tr> 
           <tr class="block"> 
            <td width="33%" style="padding-left: 20px;" class="full-width-cell"> 

             <div class="clearfix"> 
             <table width="354" cellpadding="0" cellspacing="0" border="0" align="left" class="tagline-table"> 
              <tr> 
               <td> 
                <img src="think-tank.png" width="354" height="19" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;" class="img-scale"> 
               </td> 
              </tr> 
             </table> 
             </div> 

            </td> 
            <td width="33%" align="center" class="full-width-cell"> 

             <div class="clearfix"> 
             <table width="68" cellpadding="0" cellspacing="0" border="0" align="center"> 
              <tr> 
               <td> 
                <a href="http://www.yfish.co.uk/"><img src="logo.png" width="68" height="21" alt="Yellow Fish" border="0" style="display: block; border: 0;" class="logo"></a> 
               </td>  
              </tr>   
             </table> 
             </div> 

            </td> 
            <td width="33%" style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 11px; color: #ffffff; line-height: 15px; text-align: right; vertical-align: middle; padding-right: 20px;" valign="middle" class="full-width-cell" id="view-padding"> 
             <a href="[*Hosted*]" style="color: #ffffff; text-decoration: none;">It's a crime, not to view online</a> 
            </td> 
           </tr> 
           <tr class="block"> 
            <td height="25" colspan="3">&nbsp; 

            </td> 
           </tr> 
          </table><!-- end header --> 
          <div> 

         </td> 
        </tr> 
       </table> 

     </td> 
    </tr> 
</table>

来源

2015-02-09 lejimmie

回答

1

我会开始。看起来很棒！希望你至少可以看到几个浏览器展示它。

现在... 我没有看到任何需要在头部的div，没有它的细胞重新调整大小就好了。 删除浮动，他们不会在电子邮件客户端中工作，并且对齐将适用于浏览器的浮动位置。 我花了一段时间来解决它，但你错过了文档类型。我还添加了我使用的字符集定义的版本。

我会建议使用此更换你的电子邮件的顶部：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
     <meta content="width=device-width, initial-scale=1" name="viewport" />

你的细胞现在堆放很好，一切的中心。我没有必要改变很多，但是这里是我的代码版本，以防您想将它与您的代码进行比较：http://jsfiddle.net/nivicious/xbmx3bwc/

来源

2015-02-09 20:20:53

+0

令人惊叹的，不能相信这就是缺少的，DOCTYPE !!!! 我以为它可能是这样的，因为JSFIDDLE有我自己的元数据，它工作得很好哈哈！ 感谢这确实是一个很酷的电子邮件 - 希望我的观众在他们的手机上打开它;） - 我的动画在大多数浏览器中工作:) – lejimmie 2015-02-10 09:38:29

+0

太棒了！错过了它，我希望你的动画出现在一些电子邮件客户端，显然它会在浏览器中工作 – 2015-02-10 10:02:50

相关问题

 相关问题