HTML CSS 在 IE9 中无法正常工作答案

【问题标题】：HTML CSS Not Working Properly in IE9HTML CSS 在 IE9 中无法正常工作
【发布时间】：2015-03-12 14:42:32
【问题描述】：

只是在玩我正在设计的一封新电子邮件的骨架，它似乎无法在 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 中的东西:(

【问题讨论】：

请在 head 标签中添加
@anujsoft，似乎没有什么不同:(
可以发截图吗
@anujsoft，截图在这里：imgur.com/shcK3iG,JJws7bb
您可以使用media-queries.js或respond.js在IE中添加媒体查询支持。

标签： html css internet-explorer-9

【解决方案1】：

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

【讨论】：

我在 Chrome 中打开了 jsfiddle，但这不起作用。白色容器不会在 300px 和 600px 之间切换（它只是根据窗口大小调整大小），并且顶部表格不再向右移动：（
是的，我已经删除了使用的“表格”类，这样徽标上方的表格就不会重新调整大小。如果您需要任何帮助，请告诉我