css - 奇怪的谷歌浏览器 float 错误 - 在其他浏览器中正常-6ren

css - 奇怪的谷歌浏览器 float 错误 - 在其他浏览器中正常

转载作者：太空宇宙更新时间：2023-11-04 12:20:20

我遇到了一个奇怪的错误，我试图 float 我的表格单元格( block 级别和 100% 宽度)并且它们最终并排放置，而第一个单元格表现正常。您正在专门寻找 header 。

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

在其他浏览器中它们会正常折叠，但在 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>

最佳答案

首先我会说我喜欢您在电子邮件中使用动画。看起来很棒!希望您至少可以让一些浏览器显示它。

现在...我没有看到标题周围的 div 有任何需要，没有它，单元格重新调整大小就好了。删除 float ，它们将无法在电子邮件客户端中工作，并且对齐在浏览器的 float 位置中工作得很好。我花了一段时间才弄明白，但你缺少你的文档类型。我还添加了我使用的字符集定义的版本。

我建议用这个替换您电子邮件的顶部:

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

关于css - 奇怪的谷歌浏览器 float 错误 - 在其他浏览器中正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28413184/

文章推荐： linux - 如何从主脚本中的下标获取退出代码 - bash

文章推荐： c++ - boost::variant 并获取要为 msgpack 编码的数据

javascript - 谷歌地图自动完成弹回已经清除的文本......奇怪......奇怪......奇怪
我有这种来自 Google map 自动完成的奇怪行为(或者我可能错过了某事)...想法？奇怪的: 您在输入中输入某物，例如“伦敦” 您按 [ENTER] 你按下 [CLEAR] 按钮你点击进入'输
Java意外类型做字符串比较，奇怪
这段代码与《Learning Java》(Oracle Press Books)一书中的代码完全一样，但它不起作用。我不明白为什么它不起作用，它应该起作用。我用 OpenJDK 和 Sun JDK 7
Powershell 对新行使用反引号 - 奇怪
示例 1 中究竟发生了什么？这是如何解析的？ # doesnt split on , [String]::Join(",",("aaaaa,aaaaa,aaaaa,aaaaa,aaaaa,aa
iphone - 指针类型不兼容？？奇怪
我需要获得方程式系统的解决方案。为此，我使用函数sgesv_()。一切都很好，它使我感到解决方案的正确结果。但是我得到一个奇怪的警告。警告:从不兼容的指针类型传递'sgesv_'的参数3 我正在
ios - 奇怪!动画完成后是否一直调用函数？
我目前在制作动画时遇到一个奇怪的问题: [UIView animateWithDuration:3 delay:0
jQuery 不工作 - 奇怪
alert('works'); $(window).load(function () { alert('does not work'); });
java - 静态内部类 - 奇怪
我的代码: public class MyTest { public class StringSorter implements Comparator { public
JavaScript 对象更新行为(奇怪？)
我正在学习 JavaScript。尝试理解代码， function foo (){ var a = b = {name: 'Hai'}; document.write(a.name +''
c++ - GetLastError() != 奇怪
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
Linux 环境 -i 奇怪
这按预期工作: [dgorur@ted ~]$ env -i env [dgorur@ted ~]$ 这样做: [dgorur@ted ~]$ env -i which date which: no
c++ - 指针增量 - 奇怪
struct BLA { int size_; int size()const{ return size_; } } int x; BLA b[ 2 ]; BLA * p = &b[
css - 图像垂直对齐与 css - 奇怪
我有以下代码: #test img {vertical-align: middle;} div#test { border: 1px solid green; height: 150px; li
gcc - (奇怪？)GCC 预处理器行为
我想大多数使用过 C/C++ 的人都对预处理器的工作原理有一定的直觉(或多或少)。直到今天我也是这么认为的，但事实证明我的直觉是错误的。故事是这样的: 今天我尝试了一些东西，但我无法解释结果。首先考虑
OCMock只生效一次，奇怪，为什么？或者我这边有什么问题？
我想为 TnSettings 做 mock，是的，如果通过以下方法编写代码，它就可以工作，问题是我们需要为每个案例编写 mock 代码，如果我们只 mock 一次然后执行多个案例，那么第二个将报告异常
c - 溢出？找不到来源，奇怪
我的项目中有以下两个结构 typedef volatile struct { unsigned char rx_buf[MAX_UART_BUF]; //Input buffer over U
c# - 奇怪，regex.split方法匹配一个null元素
Regex rx = new Regex(@"[+-]"); string[] substrings = rx.Split(expression); expression = "-9a3dcb
java - JDBC 连接被对等方关闭(奇怪)
我的两个应用程序遇到了一个奇怪的问题。这是设置: 两个 tomcat/java 应用程序，在同一个网络中运行，连接到相同的 MS-SQL-Server。一个应用程序，恰好按顺序位于 DMZ 中可从互联
Android OnLongClickListener 奇怪/不可靠的行为
我目前正在与 Android Api Lvl 8 上的 OnLongClickListener 作斗争。拿这段代码: this.webView.setOnLongClickListener(new
java - JUnit 奇怪 - 我未指定预期数量
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
objective-c - performSelectorOnMainThread 奇怪
只是遇到了奇怪的事情。我有以下代码: -(void)ImageDownloadCompleat { [self performSelectorOnMainThread:@selector(up

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 奇怪的谷歌浏览器 float 错误 - 在其他浏览器中正常