IE9 中的 CSS 按钮 - 不同的文本垂直对齐答案

【问题标题】：CSS button in IE9 - different text vertical alignIE9 中的 CSS 按钮 - 不同的文本垂直对齐
【发布时间】：2014-05-04 16:32:36
【问题描述】：

两个相同的标签在 IE9 中有不同的对齐方式。我已经将代码存储在http://jsfiddle.net/9B2hK/ 中，但是当我在 IE9 中看到它时，两个按钮在 6px 上都有 5px intead。如果我删除一个换行标记，第二个标记中的文本对齐就可以了。

关于我的任务的几句话。我需要由 css 样式的按钮。我创建了用于锚标记的 .btn 类，用于类型为“提交”和“按钮”的输入标记。我需要按钮高度与文本输入字段相同，因此我将其高度设置为 20px。另外因为我需要它在 chrome 和其他人中工作，我为顶部和底部设置 line-height=14px 和 padding=3px 以对齐文本。我尝试使用垂直对齐，但对于某些浏览器来说效果不佳。但是我的风格在 IE9 中很奇怪。我已经从我的页面中删除了不必要的标签，这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
    body {
        font-size: 11px;
        font-family: Verdana, Tahoma, sans-serif
    }
    .btn {
        display: inline-block;
        line-height: 14px;
        padding: 3px 10px 3px;
        font-family: Verdana, Tahoma, sans-serif;
        font-size: 11px;
        text-align: center;
        color: #FFFFFF;
        background-color: #5675B5;
        vertical-align: middle;
    }
</style>
</head>
<body>
    <span class="btn">Search</span>
    <br/><br/><br/><br/><br/><br/><br/>
    <span class="btn">Search</span>
</body>
</html>

【问题讨论】：

决定将高度降低到 19px 并移除行高。按钮变得更加不对称，但 IE 中的差异消失了。

标签： css internet-explorer

【解决方案1】：

删除行高并使用 css 转换属性。

.btn {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 10px 3px;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
    text-align: center;
    color: #FFFFFF;
    background-color: #5675B5;
    vertical-align: middle;
}

【讨论】：