2011-03-31 119 views
3

我正在嘗試在Wordpress中使用Thesis主題,它幾乎是完美的。對於導航菜單,我想使用圖像而不是文字。我的解決方案是通過CSS設置背景圖像:在IE瀏覽器中顯示CSS背景圖片的文字,而不是FF

ul.menu .tab-2 a {background:url(images/myimage.jpg) no-repeat;background-color:transparent;width:81px;height:60px;margin:0px;padding:6px;border-style:none;} 

這工作正常,但除了IE。你只看到的圖像與不是論文是寫出來的是導航項目的文本:

<li class="tab tab-2"><a href="http://www.mysite.com/about" title="About Us">About Us<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 

在IE瀏覽器,但是,在href文本並顯示在背景圖像。我想這是我預期會發生的事情,所以我驚喜地發現,在其他任何瀏覽器中都不會這樣工作。

我想弄明白的是,如果有一種方法可以讓背景圖像顯示在href文本的頂部,有效地將其弄髒。我試圖通過黑客論文來禁止寫出文本,該文本在除了一個之外的所有菜單項中都有效,這是因爲我正在寫出類別,而不是頁面。

我真的想使用Thesis的導航菜單,而不是自己推出,因爲我確信我會有更多的麻煩讓下拉在所有瀏覽器中看起來不錯,而我的CSS只是沒有那麼先進。我不認爲有一種方法可以讓論文在導航菜單項中使用圖像而不是文本。

我一直在盯着這幾個小時,顯然沒有清楚地想清楚它了。

回答

2

嘗試增加:

display:block; 
text-indent:-5000em; 
overflow:hidden; 

...您當前的規則。

一些民間人士更喜歡其他方式來做圖像替換,但這是IMO最常見的方式。

+0

輝煌,謝謝!我不得不調整下降的樣式,使他們仍然顯示,但這是完美的! – Michaela 2011-03-31 17:23:29