表不會尊重一個25px的填充在IE7

我看起來不錯：

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

CNC中

版畫

enter image description here

我不認爲我使用任何特殊的屬性，是嗎？

CNC中

基本上我只需要在表中的25px的填充物，但它不工作！

來源

2011-11-14 Toni Michel Caubet

對於郵件最好是使用內聯樣式。事實上，郵件忘記了你所學到的有關最佳實踐的一切:-) – PeeHaa

PeeHaa - 沒錯。 toni瞭解這個鏈接http：//www.sitepoint。com/code-html-email-newsletters/ – anglimasS

嗯，是的，我知道，我會在線，但更容易這種方式來開發 –

幾件事情要照顧：

沒有設置<table>元素上墊襯 - IE瀏覽器不工作正常與
總是定義字體家庭爲您的標題 - IE會忽略和使用默認字體代替如果字體家族僅被定義在body（襯線通常）
寫你的所有CSS樣式在線（我把它們作爲樣本，但你應該寫所有的CSS在線）
總是定義vertical-align:top;你td個th元素，除非你希望它是別的東西
始終定義顏色您<a>元素
始終設置<table cellpadding="0">直接在表格元素 - CSS不復位的cellpadding屬性。
不要使用浮動 - 永遠不要。您可以使用divs來包裝和設置寬度 - 只是不要浮動它們
在某些情況下，長郵件標題或段落在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>

來源

2011-11-14 13:39:44 easwee

但我以爲tat div並不是推薦給時事通訊 –

@Toni Michel Caubet - 不推薦使用浮動div - 普通div可以 - 這是最簡單的元素。浮動div的問題是，大多數電子郵件客戶端不支持'浮動'css屬性，這會導致您的電子郵件在查看時被打破。 – easwee

太好了，謝謝！背景是什麼：url？將工作？ thx again –

表不會尊重一個25px的填充在IE7

回答

相關問題