2011-08-17 39 views
8

Tôi đang gửi email HTML từ Outlook đến tài khoản mail.live.com của mình. Khi tôi xem kết quả trong mail.live.com bằng cách sử dụng Firefox, email có vẻ ổn, nhưng khi tôi sử dụng IE, tất cả nội dung đều được căn giữa.Email HTML Hiển thị văn bản được đặt trong IE

Tôi đã thêm rất nhiều align=left và CSS nội tuyến style='text-align:left' để kiểm soát nhưng không tạo ra bất kỳ sự khác biệt nào.

Khi tôi tải tệp HTML trực tiếp vào IE thì không sao; chỉ khi xem từ tài khoản Live/Hotmail của tôi thì nó bị lệch.

Có ai có vấn đề này không?

<html> 
<body style='background:#333;font-family:arial;text-align:left;'> 

     <style> 

      #BlueStripe { 

       color:#000000; 
       background:#113399; 
       width:800px; 
       height:35px; 

      } 


      #Content { 
       width:800px; 

      } 
      #LeftContentPanel { 
       border:none; 

       padding:20px; 
       padding-top:5px; 
      } 

      #LeftContentPanel h1, h2, h3 { 
       color:#113399; 
       font-family:Arial,Verdana; 
       font-weight:normal; 
       margin-bottom:5px; 

      } 
      #LeftContentPanel p { 
       margin-top:5px; 
      } 

      h1, h2 { 
       font-weight:normal; 
       font-size:22px; 
       padding-bottom:0px; 

      } 
      #RightContentPanel { 

       width:220px; 
       padding:10px; 

       margin-top:10px; 
       margin-right:30px; 

       color:#fff; 

       font-weight:normal; 

      } 
      #RightContentPanel h1, h2 { 
       font-weight:normal; 
       font-size:20px; 
       margin-top:5px; 
       margin-bottom:-5px; 

      } 

      #RightContentPanel p { 
       font-weight:normal; 
       font-size:14px; 

      } 



      .edition { 
       text-align:left; 
       font-family:Arial,Verdana; 
       font-weight:normal; 
       font-size:16px; 
       color:#113399; 
       margin-left:10px; 
       margin-top:15px; 

      } 

      #FooterText { 
       color:#113399; 
       font-size:12px; 
      } 

      p { 
       text-align:left; 

      } 


    </style> 


     <table border='0' Id='PageWidth' Style='border:0px;width:800px;background:#fff;text-align:left;' cellpadding=0 cellspacing=0 align='center'> 
      <tr> 
       <td> 
        <table border='0' Style='border:0px;width:800px;' cellpadding=0 cellspacing=0 align='left'> 

         <tr Id='BlueStripe' Width='800'> 
          <td ColSpan='3'></td> 
         </tr> 


         <!-- Header --> 
         <tr id='LogoTitle' align='Left'> 
          <!-- Col 1/2 --> <td align='left'> 
                <img src='logo.jpg' alt='club logo' /> 
               </td> <!-- Col 1 --> 
          <!-- Col 2/2 --> <td class='Panel2' ColSpan='2'> 
                <br /> 
                <img src='title.jpg' alt='club news' /> 
                <br /> 
                <br /> 
                <p class='edition' align='left'>Edition 9 – September 2011</p></td> <!-- Col 2 --> 
         </tr> 
         <!-- Banner Image - Dumb Bells --> 
         <tr Id='BannerImage' Style='width:800px;'> 
          <!-- Col 1/1 --> 
          <td ColSpan='3' Width='800px' Style='width:800px;text-align:left;' CellSpacing='0' CellPadding='0' align='Left'> 
           <img src='banner.jpg' alt='Dumb Bells' Width='800px' /> 


          </td> <!-- Col 1 --> 
         </tr> 
         <tr Id='Content' align='Left'> 
          <!-- Col 1/1 --> 
          <td ColSpan='3'> 
           <br /> 
           <table id='ContentPanel' Style='margin-top:10px'> 
            <tr align='Left'> 
             <td align='Left'> 
              <table id='' Style='border:0;text-align:left' align='left'> 
               <tr> 
                <td Id='LeftContentPanel' Width='460'> 
                 <h1>Insert heading here</h1> 
                 <p> 
                  Vellant enes mo volupition eati amenima ximpor andis es mil mi, 
                  optate cum in niatqui dellabo. Turiti quos debis demolen dustis 
                  que peditat iorione quidignimin non con eaquatia nullore perit, 
                  totat incimol orrum, coriassequo quia aut eos unt quia dolent 
                  estemquodio odionseque esed que dolupta sperror sit quia que 
                  pa dipsape llore, nitiis audi de nonse nisqui quia velit estem rem 
                  quam rerum autem voluptiae atur? 
                 </p> 
                 <h1>Insert heading here</h1> 
                 <p> 
                  Feremos quisinte siment. Cium volorpo ressit re, omnisci as 
                  autent as moluptas nonsece atquaessit eum dolut aut quis 
                  nobisto quat aborem quis antempore, id moluptatur, sa que et 
                  ea ium apis delignisi te si aut poribus ullaudae od quia conem 
                  se verepud itatemporum ulparum re, volut velis eatis es accum 
                  aut ratur, vende ius si doloriorum ent qui que velesciat que nam, 
                  alitem ati a non remperorest restrum volentintem voluptatur am 
                  rem eumqui quat et ea quiame quat. 
                 </p> 
                 <p> 
                  Occatem poreium in rehentio eat el earia iur am, et laborio. 
                  Itatur? Quiae estiorecese conseque niet estem as etusciur mos 
                  ipsapid que videbit audit quid ut volupta sperias sequate ctotat 
                  et et voluptis dellest, simus, secus aute quis iliquis si quia simus. 
                 </p> 

                 <div id='FooterText'> 
                  more text here 
                 </div> 

                </td> 
               </tr> 
              </table> 

             </td> 
             <td Width=5></td> 
             <td valign='top' align='left' style='padding:15px;text-align:left'> 
              <table Id='RightContentPanel' Style='text-align:left;' > 
               <tr style='padding:15px;text-align:left'> 






                <td style='margin-top:0px;padding:5px;padding:15px;text-align:left;padding-top:5px; background-color:#113399;'> 
                  <h1>Insert header here</h1> 
                  <p align='left' style='text-align:left'> 
                   Vellant enes mo volupition eati 
                   amenima ximpor andis es mil 
                   mi, optate cum in niatqui de 
                   llabo. Turiti quos debis demo 
                   len dustis que peditat iorione 
                   quidignimin non con eaquatia 
                   nullore perit, totat incimol or 
                   rum, coriassequo quia aut eos 
                   unt quia dolent estemquodio. 
                  </p> 
                </td> 
               </tr> 
               <tr> 
                <td height='35'> 
                </td> 
               </tr> 
               <tr> 

                <td Style='margin-top:30px;padding-top:5px;padding:5px;padding:15px;text-align:left;background-color:#ff3333;'> 
                  <h1>Insert header here</h1> 
                  <p> 
                   Vellant enes mo volupition eati 
                   amenima ximpor andis es mil 
                   mi, optate cum in niatqui de 
                   llabo. Turiti quos debis demo 
                   len dustis que peditat iorione 
                   quidignimin non con eaquatia 
                   nullore perit, totat incimol or 
                   rum, coriassequo quia aut eos 
                   unt quia dolent estemquodio. 
                  </p>           

                </td> 
               </tr> 
              </table> 

             </td> 
            </tr> 
           </table> 


          </td> <!-- End Col 1 --> 

         </tr>  
         <tr> 
          <td Id='BlueStripe' ColSpan='3'></td> 
         </tr>    
        </table> 
       </td> 
      </tr>    
     </table> 
</body> 


thông tin bổ sung từ người dùng khác:

Không ai trong số các câu trả lời dường như cho đến nay để giúp đỡ. Tôi có các bảng xếp chồng hàng đầu ở giữa và tất cả các bảng lồng nhau được căn trái với text-align:left; trên tất cả các yếu tố có thể và nó không thay đổi bất cứ điều gì.

Sau đó, tôi đã xóa tất cả các phiên bản văn bản và bảng ở giữa mã và mã STILL sẽ hiển thị với văn bản trung tâm trong tất cả ứng dụng email web trong IE 9. Thật thú vị, nếu tôi gửi email từ Gmail hoặc Yahoo trong IE 9, nó sẽ hiển thị đúng (không cần phải thêm tất cả các giá trị căn chỉnh thêm/căn chỉnh văn bản). Tuy nhiên, email này phải có nguồn gốc từ Outlook, vì vậy đây không phải là giải pháp khả thi trong trường hợp này.

+0

sẽ căn chỉnh = "trái" trong thẻ nội dung không có hiệu lực? –

+0

bạn sử dụng cơ chế nào để gửi? có phải là tệp đính kèm tệp HTML không? hoặc một số cách khác? – dldnh

+0

Bạn đang nói rằng email bạn gửi từ Outlook đang được kiểm tra từ mail.live.com của bạn. Bạn đã thử gửi nó đến một máy chủ thư miễn phí khác (ví dụ như mail.google.com) và xem cách thông báo email được hiển thị trong IE. Có thể vấn đề nằm trong phần tử HTML vùng chứa không? –

Trả lời

4

Có thể có một id/lớp xung đột trong html của bạn mặc dù điều đó sẽ dẫn đến hiệu quả tương tự trong tất cả các trình duyệt.

Không thể cho bạn biết điều gì đang diễn ra trong trình duyệt của bạn. Hãy thử kiểm tra các yếu tố với các công cụ gỡ lỗi trình duyệt, điều này sẽ cho bạn biết những gì phong cách đang được áp dụng cho họ và họ nên tiết lộ nơi text-align là đến từ.

Trong Internet Explorer, phím tắt cho công cụ gỡ lỗi là F12, sử dụng mũi tên ở phía trên bên trái của cửa sổ đó để có thể tập trung vào các yếu tố nhất định.

+0

Có quyền của bạn, có vẻ như nó hoạt động trong các trình duyệt khác, chỉ cần IE đang nhích lên. – IEnumerable

3

Vì làm phiền như vậy, hãy thử thêm một dòng nội tuyến text-align: left; vào các thẻ đoạn.

Để tham khảo trong tương lai, HTML Email Boilerplate là cơ sở tuyệt vời cho các dự án email HTML đáng sợ này.

+0

Tôi đã từ từ thêm các dòng nội tuyến khi tôi thực hiện từng thay đổi gia tăng, cảm ơn cho ref liên kết. – IEnumerable

4

Email HTML là một cơn ác mộng, tôi đã xây dựng rất nhiều, rất nhiều trong số đó. Bạn đã kiểm tra mã khi nó hiển thị trong IE?

Tôi thấy rằng Live/Hotmail hiển thị khác nhau ngay cả tùy thuộc vào phiên bản của IE - hãy để một mình các trình duyệt khác.

Ngoài ra, điều này có thể sẽ gây xúc phạm - nhưng bạn đã xác thực mã chưa?

Cheers

3

Tôi biết câu hỏi này là cũ, nhưng để tham khảo trong tương lai, tôi đã nhận thấy rằng có chứa các văn bản chính không có align = "left" quy định. Mặc dù nó được lồng trong các TD khác mà DO align =: left ", sucky IE sẽ không kế thừa cài đặt đó.

<!-- Col 1/1 --> 

       <table id='' Style='border:0;text-align:left' align='left'> 
       <tr> 
       <td Id='LeftContentPanel' Width='460' [ALIGN="LEFT" NEEDED HERE]> 
       <h1>Insert heading here</h1> 
+0

Nhưng nó tôn vinh phong cách css 'text-align: left' sẽ hoạt động theo cách nó được sử dụng trong đoạn mã. – sg3s

+0

Nó nên, nhưng tôi đã có mặc định IE để văn bản trung tâm ngay cả trong một bảng align-left. Thẻ TD ở trên không chỉ định cụ thể kiểu style = "text-align: left" hoặc "align = left" trừ khi tôi thiếu thứ gì đó. – Haikukitty

6

Thử đặt thẻ đầu vào và kết thúc thẻ HTML của bạn. Cũng đặt phong cách của bạn trong thẻ tiêu đề của bạn. Tôi đã làm điều này và thử nó trong IE Hotmail và nó đã làm việc cho tôi.

+0

đã làm công việc này cho bạn? –

1

Hỗ trợ CSS trong ứng dụng e-mail là khủng khiếp. Thật không may khi gửi qua triển vọng có thể sẽ làm cho nó thậm chí còn tồi tệ hơn. Bạn có thể muốn xem xét sử dụng một dịch vụ như thư tinh tinh, nhưng tôi đoán bạn có thể đã nghĩ về điều đó và gửi qua triển vọng là một yêu cầu của dự án, vì vậy đây là một vài tùy chọn có thể (tôi cảm thấy nỗi đau của bạn, tôi đã phải sửa những thứ tương tự).

Như một quy tắc chung về mã ngón tay cái các trang của bạn như thể là năm 1999, tôi đã tìm thấy tài nguyên theo dõi chiến dịch vô giá.

Dưới đây là hướng dẫn hữu ích về thực hành tốt chung: http://www.campaignmonitor.com/design-guidelines/

Một break đầy xuống hỗ trợ css: http://www.campaignmonitor.com/design-guidelines/

Và các diễn đàn là khá tiện dụng: http://www.campaignmonitor.com/forums/

Đừng lo lắng tôi don 't làm việc cho giám sát chiến dịch! Chỉ những thứ tôi thấy hữu ích.

Một vài điều bạn cần lưu ý:

Có thể quấn văn bản của bạn thành div và đặt căn chỉnh văn bản nội dòng: trái. Hoặc có lẽ trên thẻ p.

Tôi đoán bảng ngoài là để căn giữa thiết kế? Có lẽ nhìn vào một kỹ thuật thay thế để tập trung bên ngoài.

0
<body style="text-align:left;"> 

Hoạt động như một sự quyến rũ. Và bạn không cần phải đặt nó trong suốt email.

Các vấn đề liên quan