只是玩弄我正在设计的新电子邮件的骨架，它似乎无法在 IE9 中正确调整大小。我注意到的主要事情是顶部 table 没有移动(从右到左)并且瓶子 table 没有正确调整大小/响应。
这是 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 :(
最佳答案
对您的代码进行了更改。在 IE 中进行了测试。请查找更新的代码 HTML & CSS JSFIDDLE
关于HTML CSS 在 IE9 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27942538/