显然我一定遗漏了什么。
我试图让 header 中的内容在移动设备中从两栏变为一栏。除 IE 7.5 移动版外，它在任何地方都可以正常工作。清楚地显示: block 没有做它应该做的事情。
如何让 IE 7.5 响应式工作？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/da-partnerbroadcast.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Access Windows and Web Apps from a Chromebook</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
@media screen and (min-device-width:320px) and (max-device-width:760px) {
table[id=wrapper] {
width:100% !important;
}
td[class=items] {
width:94% !important;
display:block;
clear:both;
padding-top:10px;
}
td[class=hide], br[class=hide] {
display:none;
}
table[id=masthead] {
font-size:16px !important;
}
img[class=resize] {
max-width:100% !important;
width:100%;
}
}
</style>
<!--[if gt IE 8]>
<style type="text/css">
table#wrapper {
background-color:green !important;
width:100% !important;
}
td[class=items] {
width:94% !important;
display:block;
clear:both;
padding-top:10px;
}
td[class=hide], br[class=hide] {
display:none;
}
table[id=masthead] {
font-size:16px !important;
}
img[class=resize] {
max-width:100% !important;
width:100%;
}
</style>
<![endif]-->
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="OUTER" -->
<table id="outerwrapper" width="98%" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#e6e6e6;">
<!-- InstanceEndEditable -->
<tr>
<td>
<table id="wrapper" width="598" cellspacing="0" cellpadding="0" align="center">
<!--DA HEADER-->
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="items" align="center" valign="top" style="padding-right:10px;">
<a href="http://www.districtadministration.com" target="_blank"><img src="http://www3.districtadministration.com/mailing/logos/dalogo_new.png" alt="District Administration" width="250" height="54" hspace="0" vspace="0" border="0" /></a></td>
<td class="items" style="font-family:Helvetica, Arial, sans-serif; font-size:11px; -webkit-text-size-adjust:none; color:#999999;padding:10px;">
You are receiving this email as part of a free information service from <em>District Administration</em> Magazine.
</td>
</tr>
</table>
</td>
</tr>
<!--PARTNER CONTENT-->
<!-- InstanceBeginEditable name="Partner Content" -->
<tr>
<td style="border:1px solid #cccccc;background-color:#ffffff;">
<table id="partner" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background-color:#56c9e8;">
<table id="masthead" cellpadding="0" cellspacing="0" width="100%" bgcolor="#56c9e8">
<tr>
<td class="items" style="text-align:center;padding-left:10px;">
<font face="'varela round', helvetica, arial, sans-serif">
<strong style="color:#ffffff;font-size:24px;line-height:30px;">Access Windows and Web Apps from a Chromebook</strong>
</font>
</td>
<td class="items" style="width:320px;text-align:center;">
<img class="resize" src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/1008-mast.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align:left;padding:30px;line-height:20px;">
<font face="'varela round', helvetica, arial, sans-serif" size="2" color="#666666">
Chromebooks are quickly gaining popularity in schools because of their web capabilities and cost effective price points. However, there are some issues associated with a Chromebook rollout. For example, if you have legacy Windows applications, you are forced to either abandon them or use different hardware to gain access to them. Additionally, Chromebooks do not support Java based web applications, limiting their effectiveness as an educational tool.
<br /><br />
There is also the issue of integrating Chromebooks into your existing infrastructure. How do you manage them easily with all the other machines you are managing?
<br /><br />
Stoneware products are a cost effective way to integrate Chromebooks into your existing IT environment. Our products webRDP and <a style="color:#00689c;" href="http://www.stone-ware.com/webnetwork" target="_blank">webNetwork</a> give you the ability to access legacy Windows applications, Java based web applications, as well as HTML5 web apps. <br /><br />
For a quick summary <a style="color:#00689c;" href="http://stone-ware.com/webnetwork/education-video" target="_new">watch our three-minute webNetwork video</a>. </font>
</td>
</tr>
<tr>
<td style="text-align:center;"><a href="http://stone-ware.com/webnetwork/education-video" target="_new"><img src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/btn_video.png" alt="[button] Watch the Video" width="200" height="45" border="0" /></a>
<br /><br />
<a href="http://www.stone-ware.com/webnetwork" target="_blank"><img src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/stoneware.png" alt="[logo] Stoneware" width="300" height="100" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
<!-- InstanceEndEditable -->
<!--END PARTNER CONTENT-->
<!--DA FOOTER-->
<tr>
<td>
<table id="dafooter" width="100%" align="center">
<tr>
<td><table width="100%" align="center" cellpadding="0" cellspacing="0" style="margin-top:4px;">
<tr>
<td align="center" style="font-family:Helvetica, Arial, sans-serif;font-size:10px;color:#999999;padding-top:10px;text-align:left;">
This message was mailed to [EMAIL] as part of a free information service from <em>District Administration</em>. <a target="_blank" href='http://www.districtadministration.com' style="color:#999999;"><em>District Administration</em></a> is the award-winning magazine for district superintendents and other top K-12 education executives. To make sure you receive your <em>District Administration</em> emails, add partneremail‌@dapartner‌.net to your address book.
<br /><br />
To unsubscribe from these informational messages, please <a style="color:#999999;" href='[UNSUBURL]'>click here</a>. <a style="color:#999999;" href="http://districtadministration.com/managesubs/[CUID]">Manage Your Subscriptions</a>. <a target="_blank" href="http://www.districtadministration.com/page/privacy-policy" style="color:#999999;">View our Privacy Policy</a>.
<br /><br />
Published by: <a target="_blank" href='http://www.districtadministration.com/' style="color:#999999;"><em>District Administration</em></a>, 488‌ Main Ave., Norwalk, CT, 06851<br />
[COPYRIGHT]
</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body><!-- InstanceEnd --></html>
最佳答案
如果您将 float 应用到您正在破坏的表格单元格。它应该使它流入一列。
td[class=items] {
width:94% !important;
display:block;
float:left;
clear:both;
padding-top:10px;
}
关于css - 响应式电子邮件和 IE 7.5 移动版，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19103817/