Question

我已经创建了一个html电子邮件，几乎完美地显示在一堆电子邮件客户端上，但它在iPhone上出现故障，我不知道出了什么问题。这是代码：

<html>
<head>
<title>PCI Compliance Update</title>
</head>
<body>
<!-- Wrapper -->
<div style="text-align: center; height: 100%, width: 100%">
    <div style="position: relative; display: block; margin-right: auto; margin-left: auto; width: 580px;">
        <img src="http://www.total-partnership.com/email/PCI/brands/email_graphics/PCIheader.jpg" width="580" alt="PCI Colorado">
    </div>
    <div style="position: relative; display: block; margin-right: auto; margin-left: auto; text-align: center; width: 420px;">
        <p style="font-size: 20px">We are offering all Colorado Dental Practices a <a style="color: #bd0d2d" href="https://www.pcihipaa.com/free-risk-assessment-3/">Free Risk Assessment</a> ($599 value)</p>
        <p style="font-size: 20px">See why 1000's of Dental Practices have taken our Free Risk Assessment</p>
    </div>
    <div style="position: relative; display: block; margin-right: auto; margin-left: auto; width: 580px;">
        <img src="http://www.total-partnership.com/email/PCI/brands/email_graphics/PCIvideo.jpg" width="580" alt="PCI Colorado" usemap="#PCImap1">

        <map name="PCImap1">
        <area shape="rect" coords="124,233,468,306" href="https://www.pcihipaa.com/free-risk-assessment-3/" alt="Risk Assessment Button" target="_blank">
        <area shape="rect" coords="228,110,355,178" href="https://www.youtube.com/watch?v=YGb9CFoDAzY&noredirect=1" alt="Youtube Link" target="_blank">
        </map>
    </div>
    <div style="position: relative; display: block; margin-right: auto; margin-left: auto; width: 580px;">
        <img src="http://www.total-partnership.com/email/PCI/brands/email_graphics/PCIbottom.jpg" width="580" alt="PCI Colorado" usemap="#PCImap2">

        <map name="PCImap2">
        <area shape="rect" coords="390,102,418,128" href="https://www.facebook.com/pcihipaacompliance" alt="Share on Facebook" target="_blank">
        <area shape="rect" coords="427,102,455,128" href="https://twitter.com/_PCIHIPAA" alt="Share on Twitter" target="_blank">
        <area shape="rect" coords="464,102,493,128" href="https://www.linkedin.com/company/pci-hipaa?report%2Esuccess=KJ_KkFGTDCfMt-A7wV3Fn9Yvgwr02Kd6AZHGx4bQCDiP6-2rfP2oxyVoEQiPrcAQ7Bf" alt="Share on LinkedIn" target="_blank">
        <area shape="rect" coords="502,102,529,128" href="mailto:?subject=HIPAA Compliance3&amp;body=Thought this would be helpful to your business. https://www.pcihipaa.com/free-risk-assessment-3/" alt="Share through email" target="_blank">
        <area shape="rect" coords="186,191,399,244" href="https://www.pcihipaa.com/" alt="PCIHIPAA" target="_blank">
        <area shape="rect" coords="244,258,289,286" href="http://www.hhs.gov/ocr/privacy/" alt="HIPAA" target="_blank">
        <area shape="rect" coords="298,263,356,283" href="http://www.hipaaacademy.net/credential-offerings/certified-security-compliance-specialist/" alt="CSCS" target="_blank">
        </map>
    </div>
</div>

我没有足够的声誉来发布问题的图片，但这里有一个链接... http://www.total-partnership.com/email/PCI/brands/email_graphics/image.png

我感谢你能给我的任何帮助！

Answer 1

删除第二个div中的位置：relative 解决问题

<div style="display: block; margin-right: auto; margin-left: auto; text-align: center; width: 420px;">
        <p style="font-size: 20px">We are offering all Colorado Dental Practices a <a style="color: #bd0d2d" href="https://www.pcihipaa.com/free-risk-assessment-3/">Free Risk Assessment</a> ($599 value)</p>
        <p style="font-size: 20px">See why 1000's of Dental Practices have taken our Free Risk Assessment</p>
</div>

div不应该在iPhone上的另一个div之上

1 个答案: