5

我有两个按钮，一个实现为输入，另一个实现为跨度。它们与：

{ display:inline-block; }

这些按钮是从自定义标签呈现的，并且在 jsp 中动态添加了一个类名。在 css 中，阴影、背景渐变、填充和字体都有一些定义。他们确实使用了一些 CSS3，比如边框半径。

但是在 Firefox 中，span 按钮的高度是 18，而输入是 20。有趣的是，它们在 IE 8 中的高度都是 25px，为什么？

现在我需要它们具有相同的高度并水平对齐。

更新：现在我在 jsfiddle 中有这两个按钮。使用高度：22px；和垂直对齐：顶部；不会有太大帮助。

http://jsfiddle.net/gBeCP/

4

4 回答 4

8

尝试vertical-align:top在input标签上设置。我建议专门设置尺寸，px因为这会阻止浏览器应用默认值。

于 2013-09-09T18:04:50.260 回答
1

我想我已经完成了。

此页面中的答案表明 FF 在提交类型的输入和跨度中处理填充不同。CSS 填充添加到 <input type='submit'> 的高度/宽度

我的解决方案是设置输入和跨度的最小高度，然后使用 vertical-align:middle; 让它们对齐。最后围绕填充数字播放以使按钮上的文本对齐。

于 2013-09-09T21:58:53.060 回答
0

最简单的解决方案是以下两行（为简洁起见，删除了供应商前缀）：

.tranCoreButton {
    /* I couldn't be bothered to read through the rest of the CSS, or the
       in-line CSS; seriously: *minimal* reproductive demo, please... */
    display: inline-block;
    box-sizing: border-box;
}

JS 小提琴演示。

于 2013-09-09T22:08:16.067 回答
0

它不同的原因是因为每个浏览器都有自己的默认样式，所以它们会有所不同......就像 javascript 变化很大一样。

你有没有想过height在你想要的元素上实际设置一些高度？

也许

span, input[type="button"] {
    height: 25px;
}

或者更具体地说，如果你喜欢。

于 2013-09-09T18:43:54.373 回答