Question

我有两个按钮，一个用作输入，另一个用作跨度。它们并排放在一起：

{ display:inline-block; }

按钮从自定义标签呈现，类名在jsp中动态添加。在css中，有一些阴影，背景渐变，填充和字体的定义。他们确实使用了一些CSS3，比如border-radius。

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

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

更新：现在我在jsfiddle中有这两个按钮。使用高度：22px;和vertical-align：top;无济于事。

http://jsfiddle.net/gBeCP/

Answer 1

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

Answer 2

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

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

也许

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

或者更具体地说，如果你愿意。

Answer 3

我想我已经完成了。

此页面中的答案表示FF在提交输入类型和跨度中不同地处理填充。 CSS padding added to height/width for <input type='submit'>

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

Answer 4

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

.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 Fiddle demo

尝试对齐跨度和输入

4 个答案: