顯示：inline-block的和TEXT-INDENT

我遇到了在Internet Explorer的某些版本中下面的代碼有問題：顯示：inline-block的和TEXT-INDENT

#iconautente{ 
background-image:url('/style/images/spritecommon.png'); /*icona_utente.png*/ 
background-position:-117px -15px; 
text-indent:-9000px; 
width:20px; 
height:23px; 
display:inline-block; 
} 

<a id="iconautente" href="/admin/index.php">admin</a>

在Firefox中，Vista下的IE7和IE8，我看背景，沒有文字，如預期。在XP下的IE6和IE8中，整個圖像是縮進的，而不是文本，因此圖像不顯示。

什麼應該是正確的行爲？有沒有解決方法？

來源

2010-03-05 Daniele Cruciani

{TEXT-INDENT：-9000px;}工作，但文本縮進內嵌塊縮進整個塊，不包含文本。什麼說標準？ – 2010-03-05 12:52:36

* html #iconautente{text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie6 hack */ 

*:first-child+html #iconautente{ text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie7 hack */

來源

2010-03-18 09:49:15

我剛剛意識到，字體大小和行高度做的伎倆不顯示文本... thanx – 2010-03-18 11:06:15

文本仍然顯示在Chrome瀏覽器，在一個非常小字號（它看起來像一串點）。 – 2011-02-04 16:31:44

@HalilÖzgür這意味着對IE6/7的黑客攻擊，並可能在更新的瀏覽器中出現意外行爲。我會建議在現代瀏覽器中隱藏一個負面的文本縮進和隱藏的溢出，以及這個老版本的MSIE。 – 2011-10-03 17:51:18

~~據推測~~ Internet Explorer不支持display: inline-block;在7以下的版本，只有一部分在7.你爲什麼不使用display:block;？

來源

2010-03-05 11:55:04

準確地說，如果原始的'display'屬性是'inline'，'inline-block'只在8以下的版本中被支持。 – casraf 2010-03-05 12:20:01

原始標籤是內嵌的。因爲使用display：block;不正確的垂直對齊元素和垂直對齊沒有影響 – 2010-03-05 12:41:12

或許你可以嘗試這樣的：

 
.blk { display:inline-block; height:96px; width:96px; text-indent:-9999px; *text-indent:0; *font-size:0; *line-height:0; *overflow:hidden; }

看到使用admin和#iconautente跨度演示http://jsfiddle.net/zhiyelee/4aRZa/

來源

2011-10-02 16:45:00 zhiyelee

就我而言，這是MSIE舊版本中的一個錯誤，它需要這樣的破解才能解決。爲什麼要犧牲較新的標準來遵守舊版瀏覽器？文本縮進應用了尺寸的內嵌（嵌入塊）元素。您可以在較新的瀏覽器中將字體大小設置爲零，並使用相同的結果（不需要任何破解），但是文本縮進是我首選隱藏文本的方法。 – 2011-10-03 17:44:21

糾正自己：字體大小在所有現代瀏覽器中的行爲都不一樣，所以儘可能使用文本縮進，並在使用IE6或7時覆蓋它。另外，對於那些不知道的：此答案與接受的答案，但使用選擇器黑客，既針對IE6和7我喜歡這種方法，因爲它的代碼少。 – 2011-10-03 18:03:00

顯示：inline-block的和TEXT-INDENT

回答

相關問題