Question

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

enter image description here

关于我的任务的几句话。我需要由css设计的按钮。我创建了用于锚标记的.btn类，用于类型为“submit”和“button”的输入标记。我需要按钮高度与文本输入字段相同，所以我设置它的高度为20px。另外因为我需要它适用于chrome和其他我设置line-height = 14px和padding = 3px for top和bottom来对齐文本。我试过使用vertical-align，但是对于某些浏览器来说它不能正常工作。但我的风格在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>

Answer 1

删除line-height并使用css transform属性。

.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;
}

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

1 个答案: