Question

我有this email creative。底部框放在ff和chrome上，但在IE中它有点奇怪。

我需要在代码中添加/删除什么才能使底部框正确显示？

感谢。

这是代码：

    <title></title>
<style type="text/css">
p
        {
    margin: 0px;
    padding: 0px;
    text-align: right;
        }

        a:link
        {
            color: #990000;
            text-decoration: none;

        }
        a:visited
        {
            text-decoration: none;
            color: #990000;
        }
        a:hover
        {
            text-decoration: none;
            color: #990000;
        }
        img
        {
            border: none;
        }
        body{

            margin:0px;
        }
        </style>
<div style="text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #EEF3FA">
    <div style="text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #FFF;width: 720px;margin: 0px auto;">
    <br />
    <table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
        <tbody>
            <tr>

                <td colspan="3">
                    <a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/head.jpg" style="margin-bottom: 10px;" /></a></td>
            </tr>
            <tr>
                <td colspan="3" style="border:2px #060">
                    <a href="http://www.shvoong.co.il/minisites/kfarsaba/" target="_blank"><img src="Images/tophaedr1.jpg" style="margin-bottom: 10px;margin-right:23px;" /></a></td>
            </tr>

            </table>
            <table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700" style="margin-right:17px;">

                <!-- right -->
                <tr>
                <td valign="top" width="156" height="500">

    <table width="156" cellpadding="0" cellspacing="0" border="0"
    style="background-color: B4D336">
    <tr>
    <td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14" 
    height="14" border="0" alt="..." /></td>

    <td width="172"></td>

    <td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
    height="14" border="0" alt="..." /></td>

    </tr>

<tr>





</tr>
<tr>

<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>

<td></td>

<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>

</tr>

</table>

            <table width="156" cellpadding="0" cellspacing="0" border="0"
    style="background-color: 3778BC;margin-top: 10px;">
    <tr>
    <td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14" 
    height="14" border="0" alt="..." /></td>

    <td width="172"></td>

    <td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
    height="14" border="0" alt="..." /></td>

    </tr>
<tr>







</tr>
<tr>

<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" 
    height="14" border="0" alt="..." /></td>

    <td width="172"></td>

    <td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14"
    height="14" border="0" alt="..." /></td>

</tr>
</table>





                </td>
                    <td valign="top" width="156" >


                <table width="156" cellpadding="0" cellspacing="0" border="0"
    style="background-color: 3778BC">
    <tr>
    <td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14" 
    height="14" border="0" alt="..." /></td>

    <td width="172"></td>

    <td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
    height="14" border="0" alt="..." /></td>

    </tr>
<tr>







</tr>
<tr>

<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>

<td></td>

<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>

</tr>
</table>

                <table width="156" cellpadding="0" cellspacing="0" border="0"
    style="background-color: B4D336;margin-top: 10px;">
    <tr>

    <td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14" 
    height="14" border="0" alt="..." /></td>

    <td width="172"></td>

    <td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
    height="14" border="0" alt="..." /></td>

    </tr>
<tr>






</tr>
<tr>


<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>

<td></td>

<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>

</tr>
</table>



                </td>
                                <td valign="top" width="156">

    <table width="156" cellpadding="0" cellspacing="0" border="0"
    style="background-color: B4D336">
    <tr>

    <td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14" 
    height="14" border="0" alt="..." /></td>

    <td width="172"></td>

    <td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
    height="14" border="0" alt="..." /></td>

    </tr>
<tr>





</tr>
<tr>


<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>

<td></td>

<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>

</tr>
</table>

                <table width="156" cellpadding="0" cellspacing="0" border="0"
    style="background-color: 3778BC;margin-top: 10px;">
    <tr>
    <td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14" 
    height="14" border="0" alt="..." /></td>

    <td width="172"></td>


    <td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
    height="14" border="0" alt="..." /></td>

    </tr>
<tr>





</tr>
<tr>

<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>

<td></td>


<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>

</tr>
</table>




                </td>
                <!-- space -->

                <!-- left -->
                <td  valign="top" width="180">
                <table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">

<tr>

<td></td>

<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180" 
height="188" border="0" alt="..." /></a></td>

<td></td>

</tr>

</table>
                        <table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">

<tr>


<td></td>

<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180" 
height="188" border="0" alt="..." /></a></td>

<td></td>

</tr>

</table>
                        <table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">

<tr>

<td></td>


<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180" 
height="188" border="0" alt="..." /></a></td>

<td></td>

</tr>

</table>
                    <table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">

<tr>

<td></td>

<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180" 
height="188" border="0" alt="..." /></a></td>


<td></td>

</tr>

</table>
            </table>
                <table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
        <tbody>
            <tr>
                <td colspan="3">
                    <a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/pre.jpg" style="margin-bottom: 10px; margin-left: 8px; margin-top: -20px;" /></a></td>

                    <td colspan="3">
                    <a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/logoleft.gif" style="margin-bottom: 10px; margin-left: 11px; margin-top: -10px;" /></a></td>
            </tr>


            </table>
            </div>
</div>

Answer 1

首先，我强烈建议停止使用<table>标记来构建网页。多数民众赞成<div>的用途。

IE已知存在问题，通常我会使用星号（*）标记添加仅适用于IE的自定义CSS规则。

#myDiv{
    position: relative;
    top: 20px;
    left: 10px;
    *top: 15px; /* Should be read only be IE */
    *left: 8px; /* Should be read only be IE */
}

晒

Answer 2

您可能希望停止使用表格进行布局。

交叉浏览即

2 个答案: