IE高度小於Firefox的高度

我在嘗試讓IE的顯示與Firefox的顯示相同時遇到了一些CSS問題。特別，我想垂直居中文本框內同時還具有全高：IE高度小於Firefox的高度

如下所示： 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：黑色邊境僅用於調試;）

來源

2010-11-14 kevin

我會採取使用line-height不同的方法。如果您始終只使用一個單詞，請使用固定的行高，等於頂部/底部填充。

示例使用

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

我嘗試使用固定寬度/高度剋制，只有當我需要確保的高度將永遠是固定的指定。我通常將其設置爲行高的值。

一種元素的高度是用

line-height + padding

因此，與12px的字體大小/行高和50像素頂部/底部填充的元件將產生

12px + 50px + 50px = 112px

來源

2010-11-14 02:57:17 Marko

哦，謝謝計算。由於某種奇怪的原因，它始終沒有跨過我的腦海，在沒有身高的情況下在底部使用填充（d'oh！） – kevin 2010-11-14 02:59:55

沒有問題，請參閱我的更新，並接受如果這有助於您:) – Marko 2010-11-14 03:02:56

IE高度小於Firefox的高度

回答

相關問題