2013-09-30 10 views
1

Очевидно, я должен что-то упустить.Отзывчивый email и IE 7.5 mobile

Я пытаюсь получить содержимое в мачте, чтобы перейти от двух до одного столбца на мобильном телефоне. Он отлично работает везде, кроме IE 7.5 mobile. Четкое отображение: блок не делает то, что должен.

Как заставить 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> 

ответ

2

Если вы примените поплавок к ячейкам таблицы, которые вы нарушаете. Это должно привести к потоку в один столбец.

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

Я знал, что это будет нечто простое, что я пропал без вести ... спасибо! –