按钮CSS显示不正确

问题描述：

我试图在此页面上获取'Add to Cart'和'Checkout'按钮的样式：http://liff2013.com/product-passes/voodoo-package.html与此页上的完全相同：http://liff2013.com/workshops。按钮CSS显示不正确

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

谢谢！

那么检查应用的CSS属性... – CBroe 2013-03-26 14:24:57

答

，看起来不错的按钮：

<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或具有共同类。

答

比较你.addToCart获得与.button，.btn-cart和button

答

的样式熟悉FireBug或Chrome dev tools。这将使检查实际应用的样式变得容易。

这里的问题是，如果你想这两个按钮，你是造型的内部span元素，而不是按钮本身的一个实例，因此当应用:active伪类，你看到插图边界球。你最好的选择看起来相同的是定义一个单一的，可重用的CSS类，并将它应用于两者，使用相同的HTML标记。

答

您必须添加同一类这样的：

，好看着按钮代码：

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

S区别？

答

的边界问题正在发生，因为你有

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

其覆盖默认嵌入边框的按钮被点击时定义的CSS属性（：积极）。

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

按钮CSS显示不正确

相关推荐