Link in 100% width table results in 90% width table

问题

This is REALLY wierd.

This below code should result in a 100% width e-mail, with a lime colored top. But because the TD contains a link, the whole table is now 90% (or so) - but only in iPhone e-mail. Remove the link and the email is correct... What's going on?

https://s3.amazonaws.com/resultcaptures/C1C356D4-EAC0-4A50-B278-04155E256E51.png

I've boiled my email down to this:

<!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">
<head>
<title>Email</title>    
</head>
<body bgcolor="brown" style="margin:0;padding:0; ">
    <table cellpadding="0" cellspacing="0" width="100%" bgcolor="black">
        <tr>
            <td bgcolor="Lime">
                <div><a href="#" alt="">This</a> is a link</div>
            </td>
        </tr>
    </table>
</body>
</html>

Nothing is wrong with it... right? ...or am I blind?

回答1:

This MacRumors thread provides a solution to the issue: http://forums.macrumors.com/showthread.php?t=1158457

Try to put align="center" and style="text-align:center" onto the first table and then put style="text-align:left" onto the second one if necessary.

If you wrap your content in a parent table with center alignment, this oddly seems to eliminate the right margin on the iPhone mail reader.

回答2:

There is for sure a problem with iOS. The problem is that the e-mail gets scaled down to fit the width of the e-mail client, but when the mail is narrower than the e-mail client this accours - but only with e-mails with anchors in.

Set the with of the table to 320px to get rid of it, but say goodbye to elastic layout.

回答3:

Ok, I found a working solution:

Just set:

table {
    width: 99%; /* 99.99% doesn't seem to work */
    margin: 0 auto;
}

To get rid of the very small minimal gap, just set the background-color the same as your table.

Fixed for now!

I had the same issue: Link

来源：https://stackoverflow.com/questions/10398227/link-in-100-width-table-results-in-90-width-table

标签

iphone

ios

html-email