背景CSS圖象僅

的HTML是：背景CSS圖象僅

<div class="choose-os"> 
<p> 
    <a href="someLink" class="windows">Microsoft Windows</a> 
    <a href="someOtherLink" class="macos">Apple Mac OS</a> 
</p> 
</div>

的CSS是：

.choose-os { 
    margin: 20px 0; 
    padding: 20px; 
    background: #e7eefa; 
} 
.choose-os p { 
    margin: 0; 
} 
.choose-os p a { 
    display: inline-block; 
    text-indent: -100000px; 
    height: 56px; 
    width: 308px; 
} 
.choose-os p a.windows { 
    background: url(../images/button-windows-bg.png) 0 0; 
} 
.choose-os p a.macos { 
    background: url(../images/button-macos-bg.png) 0 0; 
} 
.choose-os p a:hover { 
    background-position: 0 -56px; 
}

任何建議，將不勝感激爲具有背景圖像也顯示在IE7。

來源

2011-07-17 Stephane Grenier

活網頁是：http://www.landlordmax.com/downloads –

text-indent: -100000px;與inline-block相結合導致這兩個元素在IE7中不可見，這是由於一個錯誤。

您需要找到其他方法來隱藏IE7的文本（或根本不使用inline-block，請參閱下面的更適合的修補程序）。

選項包括：按@Sotiris在註釋的方法，或：

.choose-os p a { 
    display: inline-block; 
    height: 56px; 
    width: 308px; 

    text-indent: -100000px; 

    /* for ie7 */ 
    *text-indent: 0; 
    *font-size: 0; 
    *line-height: 0 
}

它使用*property: value破解幾次隱藏在IE7中的文本。

該問題似乎與使用display: inline-block有關。

因此，另一個解決辦法（我喜歡我以前的一個）是：

.choose-os { 
    margin: 20px 0; 
    padding: 20px; 
    background: #e7eefa; 
    overflow: hidden 
} 
.choose-os p a { 
    float: left; 
    margin-right: 4px; 
    text-indent: -100000px; 
    height: 56px; 
    width: 308px; 
}

來源

2011-07-17 19:53:30 thirtydot

Bah，打我，+1 :) – andyb

+1他希望隱藏文本，用span來包裝它，然後用'.choose-os span {display：none}'來做這個伎倆，但我不會'不知道'display：none'是否影響SEO – Sotiris

我剛剛嘗試了兩種解決方法，似乎都沒有工作... –

-1

IE7在CSS中有一些嚴重的限制。我建議避免速記符號並明確聲明每個屬性，然後驗證CSS工作表here。

來源

2011-07-17 19:51:34

要在IE7中正確顯示inline-block，添加以下樣式.choose-os p a

zoom:1 
*display:inline

（明星是重要的！它是由現代瀏覽器忽略，但不是IE6/7）

IE7不尊重內聯塊，所以你必須做一點魔法才能使它工作。有一個偉大的描述在這裏：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

[編輯]如果TEXT-INDENT也是罪魁禍首的一部分，您可以與display:block堅持和設置你的元素float:left的更好。可能需要多個有效路徑:)

來源

2011-07-17 19:52:14 Dominic

'直列block'作品在IE7中，假設元素具有'inline'的默認樣式（當然''a'確實）。只有當你正在設計的元素具有'block'的默認樣式時，才需要這種hack。 – Spudley

夠公平的。浮動元素仍然是更好的解決方案; 「內聯塊」剛剛跳出來對我說。 – Dominic

背景CSS圖象僅

回答

相關問題