响应式电子邮件和IE 7.5移动版

时间:2013-09-30 21:05:09

标签: css responsive-design html-email ie-mobile

显然,我必须遗漏一些东西。

我正在尝试将标头中的内容从移动设备中的两列移到一列。除IE 7.5移动版外,它在任何地方都可以正清楚地显示:块没有做它应该做的事情。

如何让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&zwnj;@dapartner&zwnj;.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&zwnj; Main Ave., Norwalk, CT, 06851<br />
                [COPYRIGHT]
                </td>
              </tr>
          </table></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

    </td>
  </tr>
</table>
</body><!-- InstanceEnd --></html>

1 个答案:

答案 0 :(得分:2)

如果你将浮动应用于表格单元格,那么你就会破坏它。它应该使它流入一列。

td[class=items] {
   width:94% !important;
   display:block;
   float:left;
   clear:both;
   padding-top:10px;
}