Zurb INK，自定义 Class 不工作

Question

我正在尝试为每周产品交易创建一个非常基本的时事通讯电子邮件。我正在使用 Zurb INK。我面临的问题是，自定义 Class 之一的边框属性未实现。 CodePen Link 是 http://codepen.io/anon/pen/bNQWzX .

在第 Class 行的产品中：824。我已经定义了属性

.product {
      border-color: #0087bb;
      border: 3px solid;
      border-radius: 10px;
    }

但是，当在标记中使用时，仅实现了边框属性。半径和颜色被忽略。

HTML 标记已上线：932

<table class="six columns">
    <tr>
       <td class="center product">
         <img src="http://i.imgur.com/9xPFura.jpg" alt="Zedra Tap" width="250" height="250"/>
         <br/>
         Grohe Zedra Bath Tap - £20 OFF
         <br/>
         Was <strong>£99.99</strong> Now <strong class="nowprice">£79.99</strong>
         <br/>
                                                            <ul style="text-align:left">
                                                                <li>Contemporary Design</li>
                                                                <li>Availabe in Chrome Finish</li>
                                                                <li>Use for Kitchen</li>
                                                                <li><strong>Limited Stocks</strong></li>
                                                            </ul>
                                                            <a href="#" class="button">Buy Now</a>
                                                        </td>
                                                    </tr>
                                                </table>

请务必参考 Code Pen 上的完整标记。任何帮助都感激不尽。提前致谢

Answer 1

我很确定这是因为 td 在 table 中，它的边框总是正方形的。我认为您可以通过在具有这些样式的 td 中使用 div 来完成您想要的，但请注意，无论如何只有少数客户端支持 border-radius。

旁注：将 display:block; 放在您的任何图片上。

Answer 2

添加到@ZephyrusDigital 的答案中，它给出了 border-radius 属性不起作用的主要原因。 border-color 属性被 INK 的 Main CSS 中的某些 class 覆盖。但是将 !important 添加到属性使其起作用。感谢您的宝贵时间。

Zurb INK，自定义 Class 不工作

Zurb INK , Custom Class not Working

html

css

html-email

zurb-ink