Giải pháp cho Outlook 2007 để gói văn bản xung quanh hình ảnh có lề không?

Question

Như chúng ta đã biết, Outlook 2007 sử dụng công cụ hiển thị Word 2007, gây ra nỗi đau vô tận khi thiết kế thông báo email HTML. [Chèn rant ở đây] Đặc biệt, float, margin, và padding là - chúng ta sẽ nói? - được hỗ trợ kém.

Để mô phỏng phao để văn bản kết thúc tốt đẹp xung quanh một hình ảnh, rõ ràng là chúng tôi chỉ đơn giản là có thể sử dụng:

<img src="foo.png" align="right"> 

Vấn đề là đệm/lề. Nếu không có đệm/lề, văn bản được bao bọc sẽ chống lại hình ảnh trông có vẻ ngốc nghếch. Một giải pháp khác là chỉnh sửa hình ảnh và thêm khung trong suốt mô phỏng lề.

Có ai biết bất kỳ giải pháp nào khác không?

Answer 1

Tôi đã thử nó sáng nay và đáng buồn biên giới trên hình ảnh arnt được hỗ trợ, tuy nhiên, bạn có thể triển khai khái niệm trên vùng văn bản :).

border-left: 7px solid #fff;

ví dụ, bên trong một container trắng sẽ cung cấp cho các hiệu ứng hình ảnh của padding trái ....

Answer 2

Nếu bạn thêm một phong cách nội tuyến cho thẻ img với một lệnh lề như thế này:

<img src="foo.png" align="right" style="margin:5px;"> 

Tôi đoán đó là những gì bạn đang cố gắng để làm.

Answer 3

Tôi biết chủ đề này là cũ, nhưng một thay thế sẽ là để cho hình ảnh một đường viền vững chắc cùng màu với vùng chứa.

Answer 4

Sau khi đọc tài liệu hướng dẫn của Microsoft hỗ trợ Outlook 2007, tôi thấy rằng việc sử dụng hspace trên một hình ảnh sẽ làm việc để tạo ra không gian trắng xung quanh nó tương tự như padding.

[img src = "image.jpg" align = "left" border = "0" hspace = "10"]

Điều đó sẽ cung cấp cho bạn tương đương với 10px padding. Hoạt động tốt trên các ứng dụng email.

Tôi muốn chia sẻ trong trường hợp một người khác Googling vấn đề xảy ra trên câu hỏi này như tôi đã làm.

Answer 5

Thêm đệm xung quanh trong hình ảnh cho Outlook và tất cả ứng dụng email khác. Tôi thấy rằng công trình này hoạt động.

img { 
    padding-left: 25px!important; 
    padding-top: 25px!important; 
    padding-bottom: 25px!important; 
    padding-right: 25px!important; 
} 

Answer 6

Một vị trí được hỗ trợ trong các thẻ Outlook '07 là <td>. Vì vậy, tôi đã giải quyết điều này bằng cách gói các hình ảnh trong một bảng:

<table cellspacing="0" cellpadding="0" border="0" align="left"> 
<tbody> 
    <tr> 
     <td> 
     <table cellspacing="0" cellpadding="0" border="0" align="left"> 
     <tbody> 
      <tr> 
       <td valign="top" style="padding: 0px 10px 0 0;"> 
       <img src="http://www.mysite.com/images/myimage.jpg" style="width:60px; height:100px;" border="0" /> 
       </td> 
      </tr> 
     </tbody> 
     </table> 
     <p>The text I want to see wrap...</p> 
     </td> 
    </tr> 
</tbody> 
</table> 

Lưu ý align="left" là trên bảng cha cũng như một ngay lập tức giữ hình ảnh. Hack này là cần thiết cho Outlook 2013. Mọi thứ khác trông tuyệt vời mà không có nó trên Litmus.