CSS文本位置IE/FF問題

我有這樣的導航CSS文本位置IE/FF問題

<div class="cookieBar"> 
    <div class="light first"> 
     <a href="#" class="ckLnk">Home</a> 
    </div> 
    <div class="dark"> 
     <img src="images/cnavR1.png" class="pointE" /><a href="#9" class="ckLnk">Cars</a> 
    </div> 
    <div class="light"> 
     <img src="images/cnavR2.png" class="pointE" /><a href="#11" class="ckLnk">Ferrari</a> 
    </div> 
    <div class="dark"> 
     <img src="images/cnavR1.png" class="pointE" /><a href="#18" class="ckLnk">Broken Ones</a> 
    </div> 
    <div class="light"> 
     <img src="images/cnavR2.png" class="pointE" /><a href="#23" class="ckLnk">No Windows</a> 
    </div> 
    <img src="images/cnavR1.png" class="pointE" /> 
    <div style="clear:both"> 
    </div> 
</div>

隨着CSS：

/* Cookie navigation trail */ 
.cookieBar 
{ 
    background-color: #D8DFE3; 
    height: 26px; 
    width: 100%; 
    margin-bottom: 12px; 
} 
.light 
{ 
    background-color:#0F6B93; 
    height: 26px; 
    float:left; 
} 
.dark 
{ 
    background-color:#0E3B52; 
    height: 26px; 
    float:left; 
} 
.first 
{ 
    padding-left: 10px; 
} 
.ckLnk 
{ 
    color: #ffffff; 
    font-size: 11px; 
    font-weight: bold; 
    font-family: Arial; 
    text-decoration: none; 
} 
.ckLnk:hover 
{ 
    text-decoration: underline; 
} 
.pointE 
{ 
    float:left; 
    padding-right:10px; 
}

我需要的錨鏈接來定位幾個像素較低，所以它在盒子的中心。當我做position:relative;top:5px;它在FF中工作正常，但在IE中它有相當多的PX關閉。我似乎無法讓它在兩個瀏覽器中匹配！

任何提示？ IE需要頂部：8px;和FF需要頂部：4px;因爲它看起來是正確的。

來源

2010-09-10 Tom Gullen

或者，對準中央的鏈接，您可以只使用一個line-height相同的尺寸作爲導航欄的高度。在這種情況下：

.ckLnk 
{ 
    line-height: 26px; 
}

來源

2010-09-10 10:20:10

超級！我<3歲。 – 2010-09-10 10:22:28

IE可以聽＃標籤爲例：

#top:5px; only works in IE,

所以嘗試div的高度與5px的

#height:21px;

不要減少忘記保留舊高度爲其他瀏覽器：

#height:21px; 
height:26px;

等我忘了！

如果有5px的不工作@高度decreating，嘗試用5px的increating吧！

#height:31px;

來源

2010-09-10 10:13:55 Jordy

會使用條件註釋解決問題嗎？

http://en.wikipedia.org/wiki/Conditional_Comments

來源

2010-09-10 10:15:53 Saiyan

您應該試圖在求助於條件註釋之前嘗試並使用CSS來修復這些問題。事實上，幾乎沒有必要使用它們，這是爲了好。有條件的評論是保持屁股的一種痛苦，一旦你使用了一個，你會開始越來越多地使用它。現在是大否。 – 2010-09-10 10:18:15

所有你應該嘗試重置儘可能多的屬性，你可以第一。有時候，不同瀏覽器中的默認邊距/填充/不管是什麼差別。

嘗試加載reset.css，看看它是否仍然給出了同樣的問題。這樣你就可以開始縮小問題所在。

來源

2010-09-10 10:16:11

就我個人而言，我會將此HTML標記更改爲無序列表並使用圖像對LI進行樣式設置。

在語義上更準確，更容易控制。

標記類似：

<ul class="cookiebar"> 
<li class="first light"><a class="home" href="#">Home</a></li> 
<!-- etc--> 
</ul>

的CSS

a.home { 
    background:url(cNavR1.png); 
    display:block; 
    width:100%; 
    height:100%; 
    text-indent:-999em; 
}

等

來源

2010-09-10 10:17:49 Ross

如果你可以使用背景顏色，你爲什麼要使用圖像？更容易控制，但每次你想改變時，你都必須製作新的圖像。不好的建議。 – 2010-09-10 10:20:52

OP在他的導航欄中有圖像。可能是透明的PNG。您可以同時使用BG顏色和圖像。 – Ross 2010-09-10 10:23:49

CSS文本位置IE/FF問題

回答

相關問題