I know this post is old, but there's a really simple fix. In the past we set a line-height to 0 on <tr>'s for Outlook, however, beginning with Outlook 2016, the minimum line-height became .7pt (.75pt to be exact) which reintroduced the issue.
Here's my fix. Place this in the head of the document:
<!--[if gte mso 9]>
<style>
tr { font-size:1px; line-height:0.7pt; }
</style>
<!--[if gte mso 9]>
And anywhere you encounter a blank <td> with a height that is less than 21px, place an Outlook conditional non-breaking space:
<!--[if (gte mso 9)]> <![endif]-->
If the space is narrow where you have the blank <td>, use a zero-width space instead:
<!--[if (gte mso 9)]><![endif]-->
For many emails, I've found just the code in the <head> of the document will resolve a good portion of the problems without having to use the conditional non-breaking space/zero-width space. So just test and add where necessary.
I've coded thousands of emails using this, and have had no issues.
As mentioned, VML inside of VML causes issues in Outlook, and may vary in the degree of issues depending on the version of Outlook used as well as the position in the entire document.
My suggestion would be to embed the button image in the VML background just for Outlook. You'd have three options at that point using Outlook conditional statements:
1.) Place an Outlook only transparent .png over the spot on the background image and link it. Downside is that Windows 10 Mail won't like it since it doesn't allow images over background images.
2.) Place a <div> and a <a> tag over the spot on the background image. Using a combination of font-size and line-height on the div, and non-breaking spaces in the <a> tag, you can recreate the clickable area of the button over the background image. It doesn't need to be perfect as long as it covers it.
3.) Place a table over the button image with a set height and width and link the table. Just keep in mind when linking an entire table in Outlook, that it'll add a hidden paragraph tag below the table causing extra space to appear, so make sure the button isn't near anything else below including the bottom of the background.
An alternative if you're pulling your hair out is to include the image in the background just for Outlook/W10Mail, and hide the standard image tag from those. If the image needs to be linked, use comment code, a series of div's and non-breaking spaces to create a "square" shape for the <a> tag, specifically coded for only those email clients.
I ran into that issue back when coming up with the original VML background code. The z-index of -1 will place that image behind the body, preventing the ability to put a background color on the whole email. The only way to put content over a background image with a z-index greater than the background is to have the content within a VML shape, whether it's the same shape or a separate shape. That unfortunately loops back into the issue of any image on top not showing.
Try:
www<span style="font-size:1px; color:#ffffff;"> </span>.deadlink.<span style="font-size:1px; color:#ffffff;"> </span>com
Make sure there's a blank space between the <span> </span>.
About a decade ago I reused an email template I had created for another client, changing the text, logos, colors, address, etc...... but forgot to update the phone #. The client overlooked it as well during approvals.
The email went out, and that's when the client called saying the phone # was incorrect. I had to call the previous client (who had already begun receiving phone calls from this email), and provide them the correct phone # to give to callers.
UGH, embarrassing. Never made that mistake again!
Use a standard width attribute to cover Outlook (such as width="600"), then add a style to the image tag with style="width:100%; max-width:600px; height:auto; min-height:1px; display:block;"
A temporary ugly fix is to wrap your image with VML. Just change the width of the v:rect object style to match the image, and the height is auto due to the textbox mso-fit-shape-to-texture.
<!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroke="false" style="border:0; display:inline-block; width:650px"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><![endif]-->
<div align="center"><img src="http://www.lorempixel.com/650/400/abstract" alt="" width="650" border="0" class="" style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block; margin:0; border:0; width:100%; max-width:650px; height:auto; min-height:1px;" /></div>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->
Note: it doesn't work in all scenarios, and seems better for taller images like banners.