2010-05-22 61 views
25

我在一個網站,並在頂部導航欄有一個搜索框上工作的工作,我申請上搜索下面的CSS提交按鈕文本縮進不會在IE7

#submit { 
    background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF; 
    border:0 none; 
    cursor:pointer; 
    display:block; 
    height:21px; 
    padding:0; 
    position:absolute; 
    right:0; 
    text-indent:-9999px; 
    top:0; 
    width:20px; 
    z-index:2; 
} 

我的問題是在IE7文本縮進不起作用請幫助我 如果你想看演示,你可以點擊這裏查看Click here。請幫幫我。

+0

是text-transform:capitalize;正在工作:) – 2010-11-11 09:50:19

回答

0

我不知道是不是你問題的原因,但我認爲你的速記符號是錯誤的;顏色代碼應該在開始處,而不是結束處。

2

.submit { 
    line-height: 0px; font-size: 0px; 
    /* restante do teu código */ 
    } 

埃斯特é嗯exemplo simse

69

添加這個CSS使IE7的行爲:

text-transform: capitalize; 

瘋了,但事實。

+5

什麼在世界上。爲什麼這個工作。謝謝先生。 – Jason 2011-07-11 21:53:13

+4

不幸的是,我們沒有IE7的源代碼,我們可能永遠不會知道。 – Caimen 2011-07-11 22:04:34

+0

Ahh geez。爲什麼我不感到驚訝 – 2011-12-23 01:09:07

20

在實現像上面這樣的圖像替換技術的同時,還有一些規則需要使用CSS來使其在IE瀏覽器上工作。

CSS聲明:

text-indent:-9999px; 
text-transform:capitalize; 


font-size:0; 
display:block; 
line-height:0; 

字體大小:0用於減少字體大小和在IE7效果很好。但即使添加了這一行,您仍會注意到IE6中按鈕中央的黑線(基本上是文本)。

display:block只有在添加了這個消息後,纔會在IE中使用負文本縮進。

line-height:0 IE6的另一個修復程序。

text-transform:大寫我不知道包含屬性的確切原因,它以某種方式解決了問題。

希望這會有所幫助。

+0

謝謝!在Chrome瀏覽器中,單獨使用文本縮進就足夠了,但Firefox 16和IE7也需要使用display:block。不需要任何其他人。 – 2013-02-03 17:20:18

0

對不起,有點遲到的帖子,但正在尋找解決方案的IE7問題與消極的文字縮進。我開始嘗試自己的隨機方式,並偶然發現這一點。 JUST希望在Stack上發佈它,以便可以幫助其他人。

嘗試將圖標添加到鏈接而不顯示文本。

我對所有的瀏覽器

a.lnk_locked , a.lnk_notchecked, a.lnk_checked 
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0; width:18px; height:18px; 
     vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;} 
    a.lnk_locked { background-position: -1px -217px; } 

我的CSS只是IE7

a.lnk_locked , a.lnk_notchecked, a.lnk_checked 
{ text-indent:20px; padding-left:-20px; width:18px;} 
+0

我只是試圖將縮進負填充到我的主要樣式表中,它似乎被ie8 ie9和ff接受。 – 2011-07-11 19:39:09

0

CSS我只是想補充的 「其他」(即使它不是嚴格有關話題,而不是操作問題)。

請確保您使用「px」作爲您的價值。即-9999px而不是-9999。

我剛剛花了10分鐘試圖調試爲什麼這不起作用。盯着眼前的價值。

最近我一直在做很多Silverlight,所以我的思想沒有快速轉換到CSS標記要求。哎呀。

您必須包含一個度量單位 ....否則它只會默默地失敗。

0

,我發現在IE7我TEXT-INDENT疾苦,東西,我覺得應該加入到這個線程解決方案如下:

不起作用:

text-indent: -900009px; 

不工作:

text-indent: -9999px; 

我不知道有一個限制?我猜是有的。

1

如果沒有其他作品完全正確的,這並不:

color: transparent; 
text-indent: 0 !important; /* reset the old negative value */ 

所以正常的瀏覽器使用負文本縮進,IE7得到採用特殊處理conditional comments

+0

謝謝!這是爲我工作的唯一解決方案。但是它的工作方式並沒有添加「text-indent:0」。 – Hrushikesh 2012-12-05 19:05:03

0

下才會做的工作適合你: )

text-indent:-9999px !important; 
    line-height:0; 
1

在IE8中也有類似的問題。 消除了所有其他可能性之後,CSS中其他位置的行高宣告破壞了文本縮進。解決方法:明確設置行高爲0.

0

請勿使用text-indent。試試這個:

display: block; 
height: 0; 
padding-top: 20px; //The height of your button 
overflow: hidden; 
background: url(image.png) no-repeat; // Image replacement 

適用於包括IE6在內的所有瀏覽器。

0

我嘗試了以上所有都沒有成功。在拾取文本縮進之前,我必須添加一個float:left。 IE7是瘋狂的,瘋狂的我的意思是可怕的。

0

下面是一些CSS我使用IE中對我的作品和不依賴於text-indent

.sprite { 
    width:100%; 
    height:0px; 
    padding-top:38px; 
    overflow:hidden; 
    background-repeat:no-repeat; 
    position:relative; 
    float:left; 
    display:block; 
    font-size:0px; 
    line-height:0px; 
} 
.sprite.twitter { 
    background-image:url(/images/social/twitter-sprite.png); 
    margin-top:8px; 
    background-position: 4px 0px; 
} 
#social-links a:hover .sprite.twitter { 
    background-position: 4px -38px; 
} 
1

文本轉換:大寫;實際上對我沒有任何影響(它發生在標籤上),但是這起作用

text-indent: -9999px 
float: left 
display: block 
font-size: 0 
line-height: 0 
overflow: hidden