相关疑难解决方法(0)

请参阅以下代码示例:http://jsfiddle.net/Z2BMK/

Chrome/IE8看起来像这样

Firefox看起来像这样

我的CSS是

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

如何在两个浏览器中更改代码示例以使按钮相同？我不想使用基于JavaScript的超链接,因为它们不能与键盘上的空格键一起使用,并且它必须具有href不是处理事物的干净方式的URL.

我的解决方案,因为Firefox 13

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

看一下Chrome和FireFox 中的这个JSFiddle示例.

在Chrome中,按钮应该比FireFox小一些.我已经在Firefox 4 +中添加了如何重置默认按钮样式的解决方案CSS (这使按钮变小了)但FireFox中的按钮仍然更大.在这个例子中差异不是很明显,但看看它如何影响我的设计.

铬:

火狐:

正如您所看到的,FireFox中的按钮较粗,并且正在影响布局.有没有办法避免使用样式的div代替按钮？

另外,我正在使用Meyer的CSS重置样式表