Question

只是玩我正在设计的新电子邮件的骨架，它似乎没有在IE9中正确调整大小。我注意到的主要问题是顶部桌子没有移动（左上方），瓶子表没有正确调整大小/做出响应。

这是jsfiddle： http://jsfiddle.net/hirenshah/k7wg3yry/4/

我使用名为Thunderhead的应用程序实际创建基于来自其他应用程序的数据的电子邮件，因此这是由此生成的HTML文件。请忽略底部桌子的可怕边框造型：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Responsive</title><style type="text/css">/* Mobile Devices */
 @media only screen and (max-width: 599px) {
    .table {
        display:block;
        width:100%;
    }
    .container {
        width:300px;
        !important max-width:300px;
        !important
    }
    img.resize {
        max-width:300px;
        height:auto;
    }
}
/* All Other Devices */
 .container {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    max-width:600px;
    padding:10px;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.left {
    text-align: left;
}

.right {
    text-align: right;
}</style></head><body bgcolor="#C0C0C0"><table class="container"><tr><td><table width="100%" dir="rtl"><tr><td class="table" dir="ltr" width="35%"><p>Hello</p></td><td class="table" dir="ltr" width="65%"><p><b>Reference </b><span class="HeaderInline"><b>ABC123</b></span></p></td></tr></table><table><tr><td><p><customlink><img src="http://effervescence.me/wp-content/uploads/2014/01/UnencumberedSharingCircleBanner600px.jpg" class="resize" /></customlink></p><p class="QuoteLetterHeader">Fee is £123.45</p><p class="LetterLargeText_Fixed">Dear Mr Bob</p><p class="LetterLargeText_Fixed">Thanks for visiting our website to get a quote - you'll find your quote below.</p><p class="LetterLargeText_Fixed">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </p></td></tr></table><table width="100%"><tr><td class="table" width="50%"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;border-top-color:black;border-top-style:solid;border-top-width:1pt;"><p class="CallNumber">aa1 a1 a1 a1 a1 a1 a1 a1 1 a1 a1 a1 a1 a1 a1 a1 </p></td></tr><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;"><p class="CallNumber">a2 a2 a2 a2 a2 a2 </p></td></tr><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;"><p class="CallNumber">a3 a3 a3</p></td></tr></tbody></table></td><td class="table" width="50%"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;border-top-color:black;border-top-style:solid;border-top-width:1pt;"><p class="CallNumber">b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b </p></td></tr><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;"><p class="CallNumber">b2 b2 b2 b2 </p></td></tr><tr><td width="100%" style="border-bottom-color:black;border-bottom-style:solid;border-bottom-width:1pt;border-left-color:black;border-left-style:solid;border-left-width:1pt;border-right-color:black;border-right-style:solid;border-right-width:1pt;"><p class="CallNumber">b3 b3 </p></td></tr></tbody></table></td></tr></table></td></tr></table></body></html>

这一切都适用于Chrome和Firefox，所以它必须是IE中的东西:(

Answer 1

对您的代码进行了更改。在IE中进行了测试。请查找更新后的代码HTML & CSS JSFIDDLE

HTML CSS在IE9中无法正常工作

1 个答案: