Question

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

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

谢谢！

Answer 1

熟悉FireBug或Chrome dev tools。这样可以轻松检查实际应用的样式。

这里的问题是你在一个实例中构造一个内部span元素而不是按钮本身，所以当应用:active伪类时，你会看到插入边框。你最好的如果您希望这两个按钮看起来相同，那就是定义一个可重复使用的CSS类，并将它应用于两者，使用相同的HTML标记。

Answer 2

看起来不错的按钮：

<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或普通类的情况下查看它的样子。

Answer 3

将您从.addToCart获得的样式与.button，.btn-cart和button

进行比较

Answer 4

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

好看的'按钮代码：

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

Bad lookin'按钮代码：

<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>

看到区别？

Answer 5

由于您为

定义了CSS属性，因此出现了边框问题

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

在单击按钮时会覆盖默认的插入边框（：active ）。

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

按钮CSS显示不正确

5 个答案: