kiểu đường viền nội dòng trong một Email HTML

Question

Tôi đang làm việc trên email HTML đáp ứng và tôi đang gặp sự cố hiển thị trong Gmail CHỈ trong IE (chỉ cần có!) Nó hoạt động tốt trong 27 biến thể khách hàng khác. chúng ta cần phải hỗ trợ

tôi đã thiết lập một fiddle đây: http://jsfiddle.net/39gzj/

Bây giờ nếu bạn nhìn vào mã này, bạn sẽ thấy rằng có một biên giới đó là màu xám, sau đó chứa một biên giới mà là màu trắng . Đối với một số lý do kỳ lạ, Gmail trong Explorer, sẽ không hiển thị đường viền này chút nào, lưu cho đường viền ở dưới cùng của phần đăng ký ở dưới cùng. Tôi nghĩ rằng nó là một cái gì đó để làm với cách mà tôi đã mã hóa biên giới (tôi sẽ tắt một số mã elses, tôi đã chỉ thực hiện một số thay đổi nhỏ này) như biên giới đã được thực hiện như sau:

border-left-style:solid;border-left-width:1px;border-left-color:#fff; 

vì vậy, tôi đã thay đổi cách mà biên giới hai màu xám và trắng được khai báo như sau:

border-left-style: 1px solid #fff; 

Nhưng điều này làm cho không có sự khác biệt nào. Điều này làm tôi phát điên vì vậy hãy giúp đỡ nếu bạn có thể. Tôi nghĩ rằng nó có thể là một cái gì đó để làm với chiều rộng? Nhưng có chơi xung quanh với điều này nó chỉ phá vỡ vấn đề trong tất cả các khách hàng khác. Bất kỳ sự trợ giúp nào cũng sẽ được đánh giá cao vì tôi có thể sớm đập đầu vào màn hình máy tính của tôi.

Đánh giá cao rằng mã này chứa kiểu nội tuyến điên rồ nhưng tất nhiên đây là bản chất của email HTML.

CẬP NHẬT: Xóa đường viền trong màu trắng nằm trên các phần tử <td> làm cho đường viền màu xám. Đây có phải là một cái gì đó để làm với tôi thiết lập chiều rộng không chính xác?

CẬP NHẬT 2: Đó là IE9 rằng điều này đang được hiển thị không chính xác. VÀ CHỈ dành cho Gmail.

Answer 1

Vấn đề của bạn là đường viền nằm trên chính bảng. Bạn có xu hướng thấy rằng các ứng dụng email không thích điều đó. Cách mà tôi nhận được xung quanh nó là bằng cách đặt các bảng bên trong bảng một chút như thế này:

<table width="600" cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<td width="600" valign="top" align="center" bgcolor="#CCCCCC"> 
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;"> 
    <table width="598" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF"> 
    <tr> 
    <td width="598" align="left"> 
    Text Here 
    </td> 
    </tr> 
    </table> 
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;"> 
</td> 
</tr> 
</table> 
    <br/><br/><br/> 
<table width="600" cellpadding="0" cellspacing="1" border="0" bgcolor="#CCCCCC"> 
<tr> 
<td width="600" valign="top" align="left" bgcolor="#FFFFFF"> 
    Text Here 
</td> 
</tr> 
</table> 

Đây là đoạn mã trên: jsfiddle Tôi đã tạo ra 2 cách khác nhau để có được một hiệu ứng tương tự. Bạn có thể chọn một trong những hoạt động tốt nhất cho chính mình.

Tôi cũng thấy rằng bạn đã sử dụng chiều rộng tối đa mà một số ứng dụng email khách không thích để có thể là vấn đề của bạn. dưới đây là hướng dẫn cho người hướng dẫn chiến dịch về các lớp học css và những gì bạn nên và không nên sử dụng: http://www.campaignmonitor.com/css/

Answer 2

Tôi sử dụng thông tin sau trên bảng trong email của mình và không có vấn đề gì.

border-left: 2px #000000 solid;border-right: 2px #000000 solid;

Tôi đã thử nghiệm trong nhiều trình duyệt & email khách hàng. Đảm bảo rằng các kiểu của bạn là nội dòng, đảm bảo rằng bạn không có đường viền khác trên bất kỳ bảng bên ngoài nào, như Outlook, vv dường như được kế thừa từ bố mẹ TD

Sự cố tôi gặp phải với IE9 và Gmail là nó hiển thị phiên bản đáp ứng của email của tôi, vì vậy hãy kiểm tra các truy vấn phương tiện của bạn.Cách giải quyết này là thêm CSS vì vậy nếu bạn có <td width="600"> bạn cần phải chắc chắn rằng nó sẽ trở thành <td width="600" style="width:600px;">