gpt4 book ai didi

html - 通讯边框错误

转载 作者:太空宇宙 更新时间:2023-11-04 13:16:02 24 4
gpt4 key购买 nike

我试图创建一个响应式电子邮件模板。一切正常,除了图像边框。我为图像和媒体样式设置了边框。但是在小屏幕上,图像边框会被裁剪。

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

最佳答案

你可以设置box-sizingborder-box,但是由于这是一个相对较新的属性,并非所有浏览器(尤其是电子邮件客户端)都支持它。

关于html - 通讯边框错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24402281/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com