图像看起来像只在firefox中工作的按钮

Question

这是我使用3个div创建的按钮。 所有div都有hava图像，用于创建按钮。 这是演示链接 。

<div class="btncontainer" id="button">
        <a href="#">
            <div id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png" height="30px" />
            </div>
            <div id='backgrounddiv'>Click Me </div>
            <div id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png" height="30px" />
            </div>

    </div>

我想要一个按钮外观并添加此代码看起来像一个按钮。

    -webkit-appearance:button;
    -moz-appearance:button;
    -o-appearance:button;
    -ms-appearance:button;   

此按钮效果仅在Firefox中正常工作，但在chrome / IE中无法正确显示。 有没有其他方式看起来像一个按钮，适用于所有浏览器？ 谢谢

Answer 1

使用

<button>Some text</button> 

要么

<input type="button">

元素是使事物看起来像按钮的最可靠方法

编辑：

为了使您的按钮在Firefox，Chrome和I / E中看起来保持一致，添加一些填充将显示您目前只在Firefox中看到的灰色“按钮”效果。 DEMO