奇怪的 Google Chrome 浮动错误 - 在其他浏览器中正常
Strange Google Chrome Float Bug - Fine in other browsers
我遇到了一个奇怪的错误，我试图浮动我的 table 单元格（即块级别和 100% 宽度）并且它们最终并排放置，而第一个单元格表现正常。您正在专门寻找 header.
我正在使用 tables 因为这是一封电子邮件。
在其他浏览器中，它们会正常折叠，但在 Chrome desktop 和 mobile 上它们不会！
我也试过清除细胞...
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">
</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">
</td>
</tr>
</table><!-- end header -->
<div>
</td>
</tr>
</table>
</td>
</tr>
</table>
首先我要说我喜欢你在电子邮件中使用动画。看起来很棒！希望你至少可以让一些浏览器显示它。
现在...
我没有看到 header 周围的 div 有任何需要，没有它，单元格 re-size 就好了。
删除浮动，它们将无法在电子邮件客户端中工作，并且对齐在浏览器的浮动位置中工作得很好。
我花了一段时间才弄明白，但你缺少你的文档类型。我还添加了我使用的字符集定义的版本。
我建议您将电子邮件的顶部替换为：
<!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/
我遇到了一个奇怪的错误，我试图浮动我的 table 单元格（即块级别和 100% 宽度）并且它们最终并排放置，而第一个单元格表现正常。您正在专门寻找 header.
我正在使用 tables 因为这是一封电子邮件。
在其他浏览器中，它们会正常折叠，但在 Chrome desktop 和 mobile 上它们不会！
我也试过清除细胞...
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">
</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">
</td>
</tr>
</table><!-- end header -->
<div>
</td>
</tr>
</table>
</td>
</tr>
</table>
首先我要说我喜欢你在电子邮件中使用动画。看起来很棒！希望你至少可以让一些浏览器显示它。
现在... 我没有看到 header 周围的 div 有任何需要，没有它，单元格 re-size 就好了。 删除浮动，它们将无法在电子邮件客户端中工作，并且对齐在浏览器的浮动位置中工作得很好。 我花了一段时间才弄明白，但你缺少你的文档类型。我还添加了我使用的字符集定义的版本。
我建议您将电子邮件的顶部替换为：
<!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/