2014-06-25 62 views
0

我試圖創建一個響應電子郵件template.everything工作正常,除圖像邊框。 我爲圖片和媒體樣式設置了邊框,但在小屏幕中,圖片邊框將會被摺疊。時事通訊邊界錯誤

HTML

 <html> 
     <head> 
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> 
<style type="text/css"> 
@media only screen and (max-width: 480px) { 
.message_mobile { 
    width: 100% !important; 
    } 
    } 
</style> 
</head> 
<body id="message_body" style="background-color:white;" > 
    <table style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 600px; display: table;" align="center" class="message_mobile"><tbody><tr> 
      <td align="left" valign="top"> 
     <table cellpadding="0" cellspacing="0" style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: hidden;"> 
       <tbody><tr> 
        <td style="vertical-align:top;text-align:center;"> 
         <div> 
         <img src="http://www.myfico.com/Images/sample_overlay.gif" alt=" " style="border: 16px solid rgb(196, 45, 196); display: block; width: 100%; padding: 2px; max-width: 94.64882943143813%;" width="auto"> 
        </div> 
        </td> 
       </tr> 
      </tbody></table> 
     </td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html> 

輸出(大屏幕) enter image description here

輸出(小畫面)

enter image description here

Fiddle Demo

+0

爲什麼不使圖像寬度稍微小一點,即90%; ?因爲圖像的寬度是:width + borderwidth因此最終寬度> 100% – user2211216

+0

@ user2211216我們可以減小圖像的寬度。但是寬度需要是響應 – Shin

+0

,如果將它設置爲89%,它可以正常工作,並且響應爲 – user2211216

回答

1

您可以設置box-sizingborder-box,但因爲這是一個相對較新的屬性,而不是所有的瀏覽器(尤其是電子郵件客戶端)可以支持它。

+0

它是否支持移動瀏覽器?你知道嗎? – Shin

+0

檢查我的答案和http://caniuse.com/#feat=css3-boxsizing中的MDN鏈接。兩者都有哪些支持它的信息。 – RoToRa