html - IE 的高度小于 Firefox 的高度

Question

在尝试使 IE 的显示与 Firefox 的显示相同时，我遇到了一些 CSS 问题。 特别是，我试图在框内垂直居中放置文本，同时仍然保持全高:

此处显示: http://img9.imageshack.us/img9/4045/goddammitv.png

有什么方法可以使链接的高度与背景相同，同时仍然垂直居中(在 IE 和 Firefox 中)？

CSS:

#buttons
{
    /* RAEG */
    float: right;
    position: relative;
    left: -50%; 
    text-align: left;
}

ul
{
    list-style-type: none;
    margin: auto;
    padding-top: 10px;  
    position:relative;
    left: 50%;
}

.lbutton
{
    height: 150px;
    width: 150px;
    display: block;
    float: left;
    position: relative;
    text-align: center; 
}
.lbutton a
{
    display: block;
    width: 150px;
    height: 85px;
    color: #000;
    border: 1px solid #000;
    text-shadow: #6374AB 1px 0px 5px;
    padding-top: 65px;
}

HTML:

<div id="buttons">
<ul>
    <li class="orange lbutton"><a href="">projects</a></li>
    <li class="orange lbutton"><a href="">test</a></li>
    <li class="orange lbutton"><a href="">test2</a></li>
</ul>

PS: 黑色边框只是为了调试;)

Answer 1

我会使用 line-height 采取不同的方法。如果您总是要有一个单行字，请使用固定的行高和相等顶部/底部填充。

使用示例

a {
    display: block;
    font-size: 12px;
    line-height: 12px;
    padding: 50px 0;
    text-align: center;
}

我尽量避免使用固定宽度/高度，只有在我需要确保高度始终固定时才指定它们。我通常将其设置为行高的值。

元素的高度是使用

计算的

line-height + padding

因此一个具有 12px 字体大小/行高和 50px 顶部/底部填充的元素会产生

12px + 50px + 50px = 112px