Question

我需要使用表格

设置邮寄模板

我看起来很好：

但在Ie7中它不尊重其尺寸/边距/填充

标记：

HTML：

<table>
        <tr>
           <th>
                <h1>Esta semana hablamos de....</h1>
            </th>
        </tr>
        <tr>
           <td>
                <h2>Nuestra Cultura</h2>
            </td>
        </tr>
        <tr>
           <td>
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                </p>
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. 
                </p>
            </td>

        </tr> 
    </table>

CSS：

body{
        background:#fAfAfA;
    }

    table {
        position:relative;
        width:650px;
        background:url(fnd.jpg) center bottom no-repeat;
        font-family:'Myriad Pro',arial;
        margin:0 auto;
        padding:0 25px 85px;
        border-collapse:collapse;
        border-spacing: 0;
        display:block;

    }

    table th h1 {
        font-size:35px;
        color:#808080;
    }

    h1 {
        text-align:left;
    }
    table td h2 {
        font-weight:700;
        margin:0;
        font-size:21px;
    }
    h2,p {
        padding:0px 0px 0px 20px;
    }
    h2{
        padding-top:20px;}
        table td {
        background:#FFF;
    }
    td,th,tr {
        border:0;
        margin:0;
        width:600px;
    }

-edit -

PRINTS

enter image description here

我认为我没有使用任何特殊财产，是吗？

- 编辑 -

基本上我只需要在表格中使用25px填充，但它不起作用!!!

Answer 1

很少有事情可以照顾：

不要在<table>元素上设置填充 - IE无法正常使用
始终为您的标题定义font-family - 如果仅在body（通常为serif）上定义字体系列，IE将忽略并使用默认字体
将所有css样式内联写入（我将它们留在样本中，但你应该把所有css写成内联）
始终为vertical-align:top;和td元素定义th，除非您希望它是其他内容
始终为您的<a>元素定义颜色
始终直接在表元素上设置<table cellpadding="0"> - css不会重置cellpadding属性。
不要使用花车 - 永远不要。你可以使用div来包装和设置宽度 - 只是不要浮动它们
在某些情况下，在较长的邮件中，在IE中滚动邮件时，标题或段落往往会消失 - 通过将zoom:1应用于有问题的元素来解决此问题。

还有一些其他捕获但已经遵循此说明将为您提供跨平台的满意结果。

试试这个解决方案：

<!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>Untitled Page</title>
    <style type="text/css">
    body{
        background:#fAfAfA;
    }
    #wrapper {
        width:650px;margin:0 auto;
        padding:25px;
      background:red;
    }
    table {
        position:relative;
        font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
        margin:0 auto;
        padding:0;
        border-collapse:collapse;
        border-spacing:0;
    }
    table th {
        padding:0;
        text-align:left;
        vertical-align:top;
    }
    table th h1 {
        font-size:35px;
        font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
        color:#808080;
        margin:0;
        padding:0 40px 15px 0;
    }
    table td {
        background:#fff;
        padding:0 20px;
        vertical-align:top;
    }
    table td h2 {
        margin:0;
        font-size:21px;
        font-weight:bold;
        font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
        padding:20px 0;
    }
    table td p {
        margin:0;
        padding:0 0 20px 0;
    }
    </style>
</head>
<body>
<div id="wrapper">
<table cellpadding="0">
        <tr>
           <th>
                <h1>Esta semana hablamos de....</h1>
            </th>
        </tr>
        <tr>
           <td>
                <h2>Nuestra Cultura</h2>
            </td>
        </tr>
        <tr>
           <td>
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                </p>
                <p>
                    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. 
                </p>
            </td>

        </tr> 
    </table>
</div>
</body>
</html>

表不会尊重IE7中的25px填充

1 个答案: