javascript - 图像看起来像一个只能在 firefox 中工作的按钮

Question

这是我使用 3 个 div 创建的按钮。所有 div 都有用于创建按钮的图像。这是 demo link .

<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