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

【问题标题】：table wont respect a 25px padding in IE7表不会尊重 IE7 中的 25px 填充
【发布时间】：2011-11-14 21:52:06
【问题描述】：

我需要设置一个使用表格发送邮件的模板，

我看起来不错：

但在 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;
    }

-编辑-

打印

我认为我没有使用任何特殊属性，是吗？

-编辑-

基本上我只需要在表格中设置一个 25px 的内边距，但这不起作用！！！

【问题讨论】：

对于邮件，最好使用内联样式。事实上，对于邮件来说，忘记你所学到的关于最佳实践的一切:-)
PeeHaa - 没错。 toni 学习这个链接sitepoint.com/code-html-email-newsletters
好吧，我知道，我会内联它，但这样更容易开发
在 IE9、IE7 和 FF8 中对我来说看起来一样

标签： html css internet-explorer-7 padding

【解决方案1】：

需要注意的几件事：

不要在 <table> 元素上设置填充 - IE 不能正常工作
始终为您的标题定义字体系列 - 如果字体系列仅在 body 上定义（通常为衬线），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>

【讨论】：

但我认为 tat div 不推荐用于时事通讯
@Toni Michel Caubet - 不推荐浮动 div - 普通 div 可以 - 这是最简单的元素。浮动 div 的问题是大多数电子邮件客户端不支持 float css 属性，这会导致您的电子邮件在查看时被破坏。
太好了，谢谢！那么背景：网址呢？将工作？再次感谢
@Toni Michel Caubet - 它应该可以正常工作 - 只需记住输入包括 http:// 在内的完整路径（除非您的邮件服务在发送时自动为您执行此操作）。