DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS網頁設計技巧:表單button的text-indent
CSS網頁設計技巧:表單button的text-indent
編輯:CSS進階教程     

HTML

<input type="submit" value="Submit" id="btn" />

HTML

<input type="submit" value="Submit" id="btn" />

CSS Code
在這個實例中,通過圖片背景來制作Button,采用了圖片替代文字最常用的一種方法“text-indent”來制作


#btn {
      width:114px;
      height:37px;
      border: none;
      background: transparent url(images/submit_btn.gif) no-repeat center;
      overflow: hidden;
      text-indent: -999px;
    }

上面代碼,在現代浏覽器中不會有任何問題,可是在IE下“text-indent:-999px”是不起作用的,請看效果圖:

如何解決

為了讓各浏覽器下能正常化顯示,我一般碰到這樣的問題都是在上面的代碼基礎上加上“font-size和line-height之類的設置”:

#btn {
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;

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

}

這樣一來就能達到各浏覽器下一樣的效果了。最後我們在來看看他是如何工作的。或者說為什麼要加上這幾行代碼?


font-size:0加上font-size:0後,可以解決IE7下顯示文字的問題(換句話來說,通過設置font-size等於0後,button在IE7浏覽器中不會顯示文本出來,達到想要的效果),但是在IE6下會有明顯的一條直線,而且線條色和前景色相同。
line-height:0第一條中說過了,font-size只有解決IE7下的問題,留下了一條直線在IE6中顯示,要解決這個問題也簡單,我們可以通過line-height設置為0來解決。
display:block將button按塊元素顯示

這就是為何要這樣設置的原因了。有時候在這樣設置了以後還會給你的button留下一個小點點,我一般是通過color來設置:


#btn {
      width:114px;
      height:37px;
      border: none;
      background: transparent url(images/submit_btn.gif) no-repeat center;
      overflow: hidden;
      text-indent: -999px;
     
        font-size:0;
        line-height:0;
        display:block;
     
     
        color: #fff;
        text-align: right;
     
    }

這有一個小技巧需要特別注意:這裡的color色選擇其背景相近的色,讓人肉眼看不出來,我一般是將其文本放置左邊或右邊,然後擇其最相近的顏色做為背景色。比如這個實例,我們選了白色。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved