Question

我有电子邮件列表模板，在html + css。

http://tsiskreli.highlander.ge/next.html

在这里。这个文件中没有php，javascript，只有html和css。在所有浏览器（chrome，firefox，explorer）中，我看到它很好，顶部文本在正确的位置，表格看起来很好。我的客户看到了这样： http://s1.postimg.org/7c4iffav3/image004.jpg

即使使用300％缩放，我也能看到它：

http://s21.postimg.org/t1jltp0fb/Screenshot_12.jpg

为什么我的客户会看到边境处的这个空旷的空间以及为什么保留会让他失望呢？

Answer 1

因为你要求CSS这样做。尝试在480px屏幕下查看它，您将获得一些结果作为您的客户。检查完CSS后我发现了这个：

@media only screen and (max-width: 480px){
    td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{
        padding-right:18px !important; /* This is it */
        padding-left:18px !important;  /* This is it */
        padding-bottom:0 !important;
    }

Answer 2

此媒体查询导致填充：

@media only screen and (max-width: 480px){
    td[class=mcnTextContent] {    
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
}

备注：

不要为每个属性复制媒体查询：您可以将它们全部分组。
谨慎使用!important。
Don't use table for layout，特别是不喜欢这样：你的html结构很乱。
请考虑在问题中添加相关代码。

表格边界奇怪的行为

2 个答案:

备注：