-2

我正在尝试在此页面上获取“添加到购物车”和“结帐”按钮的样式：http: //liff2013.com/product-passes/voodoo-package.html与此页面上的完全相同： http: //liff2013.com/workshops。

未点击，按钮基本相同，但是当您点击（并按住）按钮时，样式会发生变化。任何想法为什么以及如何解决它？

谢谢！

4

5 回答 5

1

熟悉FireBug或Chrome 开发工具。这将使检查实际应用的样式变得容易。

这里的问题是您在一个实例中设置了内部span元素而不是按钮本身的样式，因此当:active应用伪类时，您会看到插入边框。如果您希望这两个按钮看起来相同，最好的选择是定义一个单一的、可重用的 CSS 类并将其应用到两者，使用相同的 HTML 标记。

于 2013-03-26T14:34:22.730 回答
0

看起来不错的按钮：

<button onclick="setLocation('http://liff2013.com//checkout/cart/add?product=13&amp;qty=1')" class="addToCart">Add To Cart</button>

看起来不太好的按钮：

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)">
    <span>
        <span>Add to Cart</span>
    </span>
</button>

我想你应该检查一下没有span或没有公共类的情况。

于 2013-03-26T14:29:50.473 回答
0

您必须像这样添加相同的类：

好看的按钮代码：

<button onclick="setLocation('BLAH')" class="addToCart">
    Add To Cart
</button>

看起来不好的按钮代码：

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)">
<span><span>Add to Cart</span></span>
</button>

修复：

<button type="button" title="Add to Cart" class="addToCart " onclick="BLAH">
    Add to Cart
</button>

看到不同？

于 2013-03-26T14:34:33.293 回答
0

出现边框问题是因为您定义了一个 CSS 属性

button.button {
    border: 2px outset buttonface !important;
}

单击按钮（:active）时，它会覆盖默认的插入边框。

其他人已经解决了字体问题。

于 2013-03-26T14:37:50.617 回答
0

比较您从中获得的.addToCart样式.button，.btn-cart和button

于 2013-03-26T14:31:32.043 回答