在IE中对齐按钮和链接，在FF中工作

Question

我知道以前曾经问过这个问题，但我似乎无法让它正常工作。

我正在尝试垂直对齐div中的按钮和链接。按钮和链接应位于彼此垂直居中的同一行上。它适用于FireFox，但不适用于IE7或IE8。

HTML：

<div class="submitform">   
    <input type="submit" value="Initiate Request" />  
    <a href="/test2">Cancel</a>
</div>

的CSS：

.submitform a 
{
    padding-left: 10px;
}

.submitform
{
    width: 600px;
    vertical-align: middle;
    padding-top: 15px;
    height: 30px;
}

这就是它在IE7和8中的样子：

请注意，取消链接未在中间与按钮垂直对齐。它在FireFox中正确对齐。

这就是我想要的样子：

以下是继承的样式：

如何修复路线？

谢谢！

Answer 1

您需要将CSS更改为：

.submitform {
    width: 600px;
    height: 30px;
}

.submitform input, .submitform a {
    vertical-align: middle;
}

.submitform a {
    padding-left: 10px;  line-height: 30px;
}

这里的关键变化是：

1. 将vertical-align: middle从父元素移动到子元素。
2. 将line-height: 30px应用于锚标记。
3. 从父级移除padding-top: 15px。如果你需要填充，请改为增加高度。

这适用于跨浏览器并支持IE7（在IE6中未经测试）。如果文本溢出到两行，这将会中断。

See live demo here

Answer 2

使用BREAK并填充容器而不是链接：

<div class="submitform">   
    <input type="submit" value="Initiate Request" />  
    <br /><a href="/test2">Cancel</a>
</div>



.submitform
{
    width: 600px;
    vertical-align: middle;
    padding-top: 15px;
    height: 30px;
    padding-left: 10px;
}

Answer 3

添加：

.submitform a 
{
    padding-left: 10px;
    vertical-align:middle;
}

你应该对IE7 / 8好。看看：

http://jsfiddle.net/Duydm/2/

Answer 4

摩西在正确的轨道上，你需要调整input和a元素的行高，如图所示http://jsfiddle.net/audetwebdesign/R8jZj/

此外，请务必使用严格的doctype ，以便在IE中没有怪癖模式效果。