html - 填充底部在 IE 8 和 IE 9 中不起作用

Question

<meta name="viewport" content="width=device-width" />

<style>
    body {
        background-color: #e4e4e4;
        font-family: 'PT Sans Narrow',Arial,sans-serif;
    }

    table {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
    }

    .ExternalClass * {
        line-height: 100%;
    }

    .bgimg {
        background-image: url('http://worldtravelhub.com.au/newsletter/201401/images/wth_map.jpg');
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        height: 0;
        padding-bottom: 77%; 
        background-repeat: no-repeat;
    }

    .checkout-price {
        position: absolute;
        top: 590px;
        margin-left: 25px;
        width: 120px;
        height: 120px;
        font: 28px/120px Helvetica, Arial, sans-serif;
        color: white;
        text-align: center;
        text-shadow: 0 -1px 1px rgba(black, .3);
        text-indent: -1px;
        letter-spacing: -1px;
        background: #e54930;
        border: 1px solid;
        border-color: #b33323  #ab3123  #982b1f;
        border-radius: 60px;
        @include user-select(none);
        @include linear-gradient(top, #f75a3b, #d63b29);
        @include box-shadow(inset 0 1px 1px rgba(white, .3), 0 1px 2px rgba(black, .2));
    }

        .checkout-price:before {
            content: '';
            position: absolute;
            top: 3px;
            bottom: 3px;
            left: 3px;
            right: 3px;
            border: 2px solid #f5f8fb;
            border-radius: 60px;
            @include box-shadow(inset 0 1px 1px rgba(white, .2), inset 0 -1px 1px rgba(black, .25), 0 -1px 1px rgba(black, .25));
        }

    .cheapest {
        margin-left: 80px;
        font-size: 14px;
        padding-top: 22px;
        font-family: 'PT Sans Narrow',Arial,sans-serif;
    }

    .bold {
        font-weight: bold;
    }

    .indsub {
        color: #e62529;
        font-size: 30px;
        font-weight: bold;
    }

    @media only screen and (max-width: 480px) {
        div, p, a, li, td {
            -webkit-text-size-adjust: none !important;
        }

            table[class="table"], td[class="cell"] {
                width: 300px !important;
            }

        img {
            display: block !important;
            max-width: 100% !important;
        }

        [class].hide {
            display: none !important;
        }

        [class].w100 {
            width: 100% !important;
            text-align: left !important;
        }

        .cheapest {
            margin-left: 5px;
            font-size: 10px;
            padding-top: 10px;
            font-family: 'PT Sans Narrow',Arial,sans-serif;
            max-width: 100% !important;
        }

        .bold {
            font-weight: bold;
        }

        .indsub {
            color: #e62529;
            font-size: 22px;
            font-weight: bold;
        }

        .checkout-price {
            margin-left: 0px;
            top: 260px;
        }
        /*.bgimg {
        background-image: url('images/wth_map.jpg');
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        height: 0;
        padding-bottom: 77%; 
        background-repeat: no-repeat;
    }*/
    }

    @media only screen and (max-width: 767px) {
        div, p, a, li, td {
            /*-webkit-text-size-adjust: none !important;*/
        }

            table[class="table"], td[class="cell"] {
                width: 300px !important;
            }

        img {
            display: block !important;
            max-width: 100% !important;
        }

        [class].hide {
            display: none !important;
        }

        [class].w100 {
            width: 100% !important;
            text-align: left !important;
        }

        .cheapest {
            margin-left: 5px;
            font-size: 10px;
            padding-top: 10px;
            font-family: 'PT Sans Narrow',Arial,sans-serif;
            max-width: 100% !important;
        }

        .bold {
            font-weight: bold;
        }

        .indsub {
            color: #e62529;
            font-size: 22px;
            font-weight: bold;
        }

        .checkout-price {
            margin-left: 0px;
            top: 260px;
        }
    }
</style>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<div style="background-color: #e4e4e4">
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
        <tr>
            <td class="cell">
                <table>
                    <tr>
                        <td>
                            <span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser<a href="http://worldtravelhub.com.au/newsletter/201401/201401.html" target="_blank" style="text-decoration: underline; color: blue;"> Click Here</a></span>
                        </td>
                    </tr>
                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                    <tr>
                        <td>

                            <table border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
                                <tr>
                                    <td>
                                        <img src="http://worldtravelhub.com.au/newsletter/201401/images/high_quality_logo_wth.png" width="500" height="108" border="0" style="display: block"></td>
                                </tr>
                            </table>
                            <table border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
                                <tr>
                                    <td align="right" class="w100">
                                        <!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
                  <font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
                    </font>-->

                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
                    <tr>
                        <td>
                            <table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
                                <!--<tr>
                <td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>

<font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
</div>

                </td>
              </tr>-->
                            </table>
                            <table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
                                <!-- <tr>
                  <td class="w100">
                     <img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />

</td>
                </tr>-->
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <!--<img src="images/600.png" border="0" style="display:block">-->
                            <div class="bgimg">


                                <p class="cheapest">
                                    <span class="bold">We'll get you the CHEAPEST flights to the</span><br />
                                    <span class="indsub">Indian Subcontinent</span>
                                </p>
                            </div>
                        </td>
                    </tr>
                </table>


                <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
                    <tr>
                        <td>
                            <table width="100%" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
                                <tr>
                                    <td class="w100">
                                        <span class="checkout-price">
                                            <span style="font-size: 10px;">FROM</span> $850*
                                           <!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></td>
                                </tr>
                            </table>
                            <table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
                                <tr>
                                    <td class="w100">
                                        <!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->
                                        <div style="text-align: center; margin-right: 30px;">
                                            <a href="tel:1800 984 045" style="color: #e62529; font-size: 20px; font-weight: bold; text-decoration: none;">Toll Free: 1800 984 045</a><br />
                                            <a href="mailto:info@worldtravel.com.au" style="font-size: 11px; letter-spacing: 2px; text-decoration: none; color: #000;">info@worldtravelhub.com.au</a><br />
                                            <a href="http://www.worldtravelhub.com.au/" style="font-size: 11px; letter-spacing: 1px; text-decoration: none; color: #000;">www.worldtravelhub.com.au</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
                    <tr>
                        <td>
                            <table width="100%" border="0" align="center" cellpadding="10" cellspacing="0" class="w100">
                                <tr>
                                    <td class="w100">
                                        <p style="text-align: center;">
                                            <span style="font-size: 22px; color: #e62529; letter-spacing: 3px; font-weight: bold;">Book online <span style="color: #000;">24/7 </span>at worldtravelhub.com.au</span><br>
                                            <span style="font-size: 8px;">*A Verifiable written quote from another Australian registered travel businesses must be aproved and fare quoted must be generally avaliable to the public in the market and must be for the same date,seat class,fare category and airline and given to us before we make a booking for the customer.The quote must be for booked fares originating in Australia to Indian subcontinent.Lics No<span style="font-weight: bold;"> 2TA6049</span></span>
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#888888">
                    <tr>
                        <td>
                            <table width="290" border="0" align="left" cellpadding="10" cellspacing="0" class="w100">
                                <tr>
                                    <td class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>WorldTravelHub</strong><br>
                  Suite 4, 2 Kendall St,<br>
                  Harris Park NSW 2150</font></td>
                                </tr>
                            </table>
                            <table width="290" border="0" align="right" cellpadding="10" cellspacing="0" class="w100">
                                <tr>
                                    <td align="right" class="w100"><font face="Arial, Helvetica, sans-serif" color="#ffffff" style="font-size: 12px"><strong>Phone:</strong> +61 2 8005 2797<br>
                    <strong>Fax:</strong>+61 2 8005 4237<br>
                    <strong>Email:</strong> info@worldtravelhub.com.au</font></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <table width="100%" border="0" cellspacing="0" cellpadding="10">
                    <tr>
                        <td>
                            <span style="font-size: 10px; color: #666666">If this email doesn't display properly you can view it in your web browser<a href="http://worldtravelhub.com.au/newsletter/201401/201401.html" target="_blank" style="text-decoration: underline; color: blue;"> Click Here</a></span>
                            <br>
                            <br />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

我的 html 页面在所有版本的 Chrome 浏览器和 IE 10 中都可以正常工作，但在 IE 8 和 IE 9 中似乎无法正常工作，问题在于类 .bgimg 中的 padding-bottom css。页面就在下面，当我添加 px 而不是 % 它向上移动并且可以工作但是下面的文本即红色的联系方式不再可见..请帮忙感谢高级帮助

你可以在这个链接上查看.. http://worldtravelhub.com.au/newsletter/201401/201401.html

Answer 1

您可以尝试将 display: block; 应用于任何元素，然后再给它 padding-bottom