空間之間的空間不適用於iOS

我正在爲Outlook製作簽名。在瀏覽器中，它在outlook，gmail和其他本地郵件中看起來也不錯。空間之間的空間不適用於iOS

在Android上，它的工作原理也不錯，但是當我在iPhone上發送電子郵件時，由於空格不起作用，這條藍線（在左側）被刪除。它也發生在一封電子郵件中。

我已經創建了一個示例來顯示這裏的一切看起來不錯。

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" display:block; width:100%;> 
 
    <table style=" 
 
    border-spacing: 0; 
 
    border: none; 
 
    border-collapse: collapse; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: block;"> 
 
     <tr> 
 
      <th rowspan="5" style="padding: 0px 0px 0px 15px; border-left:solid 10px #3580C2;"></th> 
 
      <th> 
 
       <div style="text-align:left; font-family:'Calibri light', sans-serif;"> 
 
        <span style="font-size: 14px; display: inline; white-space: nowrap; color: #000; text-align:left;">Test</span><br><br> 
 
        <span style="font-size: 19px; display: inline; white-space: nowrap; color: #3580C2; text-align:left;">Name</span><br> 
 
        <span style="font-size: 14px; display: inline; white-space: nowrap; color: #000; text-align:left;">Test Test</span> 
 
       </div> 
 
      </th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <img src="test/image001.png" width="139" height="209" alt="zdjecie" style="vertical-align: middle;"> 
 
      </td> 
 
      <td style="vertical-align:middle; line-height: 1.5em;"> 
 
       <div style="font-family:'Calibri', sans-serif; margin-left: 15px;"> 
 
        <img alt="phone" src="test/image006.png" height="18" width="19" style="display: inline;" ></img> 
 
        <span style="font-size: 15; display: inline; white-space: nowrap;">&nbsp 000 000 000</span> 
 
        <br> 
 
        <img alt="fax" src="test/image008.png" height="18" width="19" style="display: inline;"> 
 
        </img> 
 
        <span style="font-size: 15; display: inline; white-space: nowrap;">&nbsp 000 000 000</span> 
 
        <br> 
 
        <img alt="cell" src="test/image010.png" height="18" width="19" style="display: inline;"> 
 
        </img> 
 
        <span style="font-size: 15; display: inline; white-space: nowrap;">&nbsp 000 000 000</span> 
 
        <br> 
 
        <img alt="mail" src="test/image012.png" height="18" width="19" style="display: inline; "></img> 
 
        <span style="font-size: 15; display: inline">&nbsp [email protected]</span> 
 
        <br><br> 
 
        <span style="display: inline; font-size: 16"><b>Company</b></span> 
 
        <br> 
 
        <span style="display: inline; font-size: 15">Address</span> 
 
        <br> 
 
        <span style="display: inline; font-size: 15">NIP: 00000000</span> 
 
        <br> 
 
        <a style="color:black; text-decoration:none; display: block;" href="http://www.web.com"> 
 
         <span style="display: inline; font-size: 16;"><b>www.web.com</b></span></a> 
 
        <br> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
<table style=" 
 
    border-spacing: 0; 
 
    border: none; 
 
    border-collapse: collapse; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: block;"> 
 
    <tr> 
 
    <th rowspan="3" style="white-space: nowrap; padding: 0px 0px 0 15px; border-left:solid 10px #3580C2; margin-bottom: 0; 
 
     padding-bottom: 0; text-align:left; line-height: 18px;"></th> 
 

 
    <td rowspan="2"> 
 
    <br> 
 
<img src="test/image014.png" style="width: 274px; height: 35px;"></img> 
 
<br><br> 
 
</td> 
 
    </tr> 
 
</table> 
 
<table style=" 
 
    border: none; 
 
    border-collapse: collapse; 
 
    padding: -10px 0px 0px 0px; 
 
    margin: 0; 
 
    display: block;"> 
 
    <tr> 
 
    <th rowspan="3" style="white-space: nowrap; padding: 0px 0px 0 15px; border-left:solid 10px #3580C2; margin-bottom: 0; 
 
     padding-bottom: 0; text-align:left; line-height: 18px;"></th> 
 
     <th colspan="3"></th> 
 
    </tr> 
 
    <tr> 
 
    <td style="width: 760px;"> 
 
    <div style="font-family:'Calibri', sans-serif; font-size:10px; color:#aaa; margin-left: 15px;"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit justo eros. Vivamus dictum tempus venenatis. Donec at tincidunt quam.</p> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit justo eros. Vivamus dictum tempus venenatis. Donec at tincidunt quam. Phasellus sodales elementum nisl ornare ultricies. Sed leo ex, congue sed gravida eu, accumsan vel dui. Vivamus dolor mi, pharetra non augue ut, eleifend porta ipsum. Ut laoreet pellentesque sem ac imperdiet. Nulla nec enim metus. Nam interdum, nisl at pharetra venenatis, dolor odio efficitur neque, eget tincidunt purus erat sed velit. Curabitur dictum, augue vel auctor bibendum, quam nisl malesuada leo, eu gravida est turpis at justo. Nullam quis urna a eros accumsan tristique dictum eget massa. Vivamus fermentum ante metus, maximus eleifend dui ultricies ut. Suspendisse potenti. Quisque ut vehicula augue. Ut interdum efficitur eros, porta mollis odio semper quis..</p> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit justo eros. Vivamus dictum tempus venenatis. Donec at tincidunt quam. Phasellus sodales elementum nisl ornare ultricies. Sed leo ex, congue sed gravida eu, accumsan vel dui. Vivamus dolor mi, pharetra non augue ut, eleifend porta ipsum. Ut laoreet pellentesque sem ac imperdiet. Nulla nec enim metus. Nam interdum, nisl at pharetra venenatis, dolor odio efficitur neque, eget tincidunt purus erat sed velit. Curabitur dictum, augue vel auctor bibendum, quam nisl malesuada leo, eu gravida est turpis at justo. Nullam quis urna a eros accumsan tristique dictum eget massa. Vivamus fermentum ante metus, maximus eleifend dui ultricies ut. Suspendisse potenti. Quisque ut vehicula augue. Ut interdum efficitur eros, porta mollis odio semper quis.</p> 
 
</div> 
 
</td> 
 
    </tr> 
 
</table> 
 
</body>

這是藍線發生了什麼。它看起來像三張桌子之間有很大的空間。 Stripped line

來源

2017-03-24 Adam Landrag

我沒有的answere你的問題本身，而是簡單地只是把一個div在整個表並使用下面的CSS難道不容易：

.divclass { 
    border-left-width:10px; 
    border-left-style:solid; 
    border-left-color:#3580C2; 
}

我認爲這將在就容易所有，也許它也有助於我們的IOS問題呢？評論，如果它可能解決您的問題:)

編輯：我忘了，如果你做了，你可能需要浮表一個div：左..

.divclass { 
    border-left-width:10px; 
    border-left-style:solid; 
    border-left-color:#3580C2; 
    float:left; 
}

來源

2017-03-24 14:02:11 Degcube

謝謝它就像一個魅力:) –

高興它幫助你！ :) – Degcube

空間之間的空間不適用於iOS

回答

相關問題