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

IE高度小于Firefox的高度

1 个答案: