【问题标题】:Zurb INK , Custom Class not WorkingZurb INK,自定义类不起作用
【发布时间】:2015-03-16 16:01:32
【问题描述】:

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

在在线产品类中:824。我已经定义了属性

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

但是,在标记中使用时,只实现了 Border 属性。并且半径和颜色被忽略。

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 上的完整标记。 任何帮助都感激不尽。提前致谢

【问题讨论】:

    标签: html css html-email zurb-ink


    【解决方案1】:

    我很确定这是因为tdtable 中,所以它的边界总是方形的。我认为您可以通过在 td 中使用 div 和这些样式来完成您想要的操作,但请注意 border-radius 无论如何仅在少数客户端中受支持。

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

    【讨论】:

      【解决方案2】:

      添加来自@ZephyrusDigital 的答案,这给出了border-radius 属性不起作用的主要原因。 border-color 属性被 INK 的主 CSS 中的某个类覆盖。但是将!important 添加到该属性使其工作。感谢您的时间。

      【讨论】:

        猜你喜欢
        • 2015-02-07
        • 2014-09-30
        • 1970-01-01
        • 2017-03-14
        • 2015-05-04
        • 2013-05-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多