Yahoo changes width to min-width on td

瘦欲@ 提交于 2019-12-21 06:26:09

问题


Sorry, not 100% certain if this belongs here or Super-User group but...

I have an html email, with 4 icons that I want centered and slightly spaced.

So, I have a table with 4 set width cells and an extra empty one on either side.

<table style="width:100%;border-collapse:collapse;table-layout:fixed;">
    <tr>
        <td></td>
        <td style="width:32px;padding:0 4px;"><a><img src="" /></a></td>
        <td style="width:32px;padding:0 4px;"><a><img src="" /></a></td>
        <td style="width:32px;padding:0 4px;"><a><img src="" /></a></td>
        <td style="width:32px;padding:0 4px;"><a><img src="" /></a></td>
        <td></td>
    </tr>
</table>

Works in every email client in every browser I've tested (mostly using Litmus) except for Yahoo.

Yahoo is replacing the "width" declaration with "min-width" across all browsers, which is breaking the layout.

I've tried adding width:32px;min-width:32px;max-width:32px but it has the same issue.

Any workarounds or explanations?


回答1:


Quick fix, place this in your <style> tag: @media yahoo {min-width:0!important}

This change/bug is brand new at the time of this posting. Yahoo is now changing width to min-width, breaking hybrid layouts among other things. There is a good discussion about other hacks in the Litmus Community.




回答2:


I faced the similar problem with height. Yahoo email client automatically converted height to min-height.

As a fix to this problem, I added height="300px" as an attribute to the tag.

This helped me to solve the issue.



来源:https://stackoverflow.com/questions/37683940/yahoo-changes-width-to-min-width-on-td

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!