中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

by zhangxinxu from http://www.zhangxinxu.com

本文地址：http://www.zhangxinxu.com/wordpress/?p=3557

一、文不在長，有貨則靈

圖片式按鈕的文字隱藏看來是大家都比較關(guān)注的一個問題（分享討論、微博轉(zhuǎn)發(fā)等可見一斑），text-indent負(fù)值為最常用方法，然問題有三：

1. 較大的負(fù)值有性能問題，例如新浪/騰訊微博提交按鈕的-9999em，大概12~16萬像素的寬度，相對于100個顯示器寬度，在低配Android pad上，尤其含動畫效果的時候，會直接卡爆；


2. FireFox瀏覽器下虛框。其實(shí)問題不大，overflow:hidden可修復(fù)；


3. 不能應(yīng)用在IE6/IE7偽inline-block水平元素上，否則元素會被text-indent拐走。

即使有人提出：

{ text-indent: 100%; white-spacing: nowrap; overflow: hidden; }

除了性能有所緩解，后面兩個問題依舊存在。

二、法不在高，能用則行

上周分享，有同行提到另外一個隱藏之法，簡稱為：font: 0/0 a法。

釋義為，字號大小0, 行高0，字體a是因?yàn)榫鸵粋€字母，換成b也是OK的，實(shí)際并無a字體。日本高中社團(tuán)要至少4個人才能成立，游泳社就3個人，于是就去田徑隊(duì)找了個旱鴨子來充數(shù)，這個旱鴨子就是這里的a.

一般要配合overflow: hidden使用。

實(shí)例頂千言，您可以狠狠地點(diǎn)擊這里：font:0/0 a與按鈕文字隱藏demo

CSS代碼如下：

.btn {    display: inline-block;    width: 52px; height: 25px;    border: 0;    background: #f0f0f0 url(/study/image/flash_copy_btn.png);    font: 0/0 a;    overflow: hidden;    /* 抹掉a標(biāo)簽按鈕最上面的小點(diǎn) */}

說明：

1. 網(wǎng)上有說法是Chrome下需要添加color: transparent，不過據(jù)我win7 Chrome瀏覽器查看，沒什么問題，因此CSS中無此聲明；


2. overflow: hidden用來解決IE6瀏覽器下，a元素等模擬標(biāo)簽下最頂部殘存小點(diǎn)點(diǎn)的問題。


3. 對于原生的button按鈕元素，此方法表示無能為力，低版本IE瀏覽器下，小點(diǎn)點(diǎn)依舊存在，如下放大后的截圖：
   
   
   

相比text-indent負(fù)值縮進(jìn)，此方法優(yōu)點(diǎn)在于可以應(yīng)用在inline-block水平元素上；不足在于不能用在原生的button按鈕元素上。

因此，還有改進(jìn)余地以及尋找更好方法的動力。

三、斯是吾法，齊論德馨

此方法是我午飯后打瞌睡的時候想到的，一句話概括就是letter-spacing負(fù)值+first-letter偽元素負(fù)值實(shí)現(xiàn)。

對于新方法，先展示效果才能讓別人有繼續(xù)深入的興趣。您可以狠狠地點(diǎn)擊這里：letter-spacing/first-letter與按鈕文字隱藏demo

IE6瀏覽器下的截圖如下：

CSS代碼如下：

.btn {    display: inline-block;    width: 52px; height: 25px;    border: 0;    background: #f0f0f0 url(/study/image/flash_copy_btn.png);    letter-spacing: -3em;    overflow: hidden;}.btn:first-letter {    margin-left: -20em;}

1. 關(guān)于letter-spacing負(fù)值

letter-spacing控制字符間距，可以是負(fù)值，可以讓字符水平方向重疊，甚至倒序排列，如值為-2em時候。選擇下面下拉值，可以看到不同letter-spacing大小對應(yīng)效果：

于是，如果按鈕text-align為left的話，letter-spacing值在小于-2em的時候，字符都跑到了首字符的左側(cè)（也就是在按鈕的外面）。一旦按鈕設(shè)置了overflow:hidden，除了第一個字符，其余字符都隱藏了！

2. 關(guān)于first-letter偽元素

first-letter偽元素與first-line偽元素實(shí)際是表兄弟關(guān)系，first-line可以實(shí)現(xiàn)IE6/IE7的單標(biāo)簽多背景效果，前不久剛介紹，那first-letter呢？

顧名思意，first-letter控制第一個字符的樣式，IE5.5開始支持，支持的樣式有（參考自MDN）：

• 所有字體相關(guān)屬性：font, font-style, font-variant, font-weight, font-size, line-height以及font-family.


• 所有背景相關(guān)屬性：background-color, background-image, background-position, background-repeat, background-size, 以及background-attachment.


• 所有margin相關(guān)屬性：margin, margin-top, margin-right, margin-bottom, margin-left.


• 所有padding相關(guān)屬性：padding, padding-top, padding-right, padding-bottom, padding-left.


• 所有border相關(guān)屬性：縮寫的border, border-style, border-color, border-width及普通書寫的屬性。


• color屬性。


• text-decoration, text-transform, letter-spacing, word-spacing(合適情境下), line-height, float, vertical-align(只有當(dāng)float為none的時候)這些CSS屬性們.

要隱藏第一個字符，我采用的就是margin負(fù)值。例如：

.btn:first-letter {    margin-left: -20em;}

于是，字符們?nèi)慷茧[藏了！

當(dāng)然，還是有些需要說明的。

3. 其他一些說明：

1. 此方法兼容IE6+, 適用于inline-block水平元素，且適用于button元素，不過，需要是下面這種寫法：
   
   
   

   <button type="button/submit">按鈕</button>

   
   
   
   

   而不能是這樣子：

   
   
   
   

   <input type="button/submit" value="按鈕" />

   
   
   
   


2. 此方法受text-align屬性影響。letter-spacing負(fù)值+first-letter的margin負(fù)值適用于text-align:left;的情況，如果按鈕text-align為right，則letter-spacing以及first-letter的margin需要使用正值。
   

   值的大小其實(shí)沒有定值。一般，letter-spacing絕對值大于2em可以，首字符margin可以大一些，demo中是-20em.



3. 多個:first-letter偽元素不要使用逗號分隔，貌似會全部失效，應(yīng)分開寫使用逗號分隔的時候逗號前面一定要留一個空格，就跟眾所周知的{前面要留有空格一樣，否則，IE6瀏覽器會忽略這條聲明：
   
   
   

   .btn:first-letter,.img:first-letter {    margin-left: -20em;}.btn:first-letter ,    /* 逗號前需有1個空格 */.img:first-letter {    margin-left: -20em;}

   
   
   
   

未大規(guī)模測試，歡迎反饋問題。

在實(shí)際應(yīng)用的時候，我們可以把該功能的CSS獨(dú)立出來，公共使用，例如：

.notext {    text-align: left;    letter-spacing: -3em;    overflow: hidden;}.notext:first-letter {    margin-left: -20em;}

四、不是會兩句古詩就了不起的

其實(shí)呢，如果不要兼顧原生button按鈕，還可以使用padding撐開容器尺寸隱藏文字的方法，類似下面：

.btn {    display: inline-block;    padding-top: 25px;    width: 52px; height: 0;    background: #f0f0f0 url(/study/image/flash_copy_btn.png);    overflow: hidden;}

代碼少，理解簡單，兼容性還不錯。就是不能用在正宗的按鈕元素上（IE6/IE7直接隱藏抗議）。

五、孔子曰：“何陋之有？”

letter-spacing+first-letter隱藏文字的方法動用了偽元素，方法雖糙，但效果不糙。我個人覺得比前兩種方法都要好一些，您覺得呢？

行文倉促，文中難免有表達(dá)不準(zhǔn)確之處，歡迎指正；如果有技術(shù)性錯誤，務(wù)必指出，感謝閱讀！

原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]

本文地址：http://www.zhangxinxu.com/wordpress/?p=3557

（本篇完）

如果您覺得本文的內(nèi)容對您的學(xué)習(xí)有所幫助：

標(biāo)簽： :first-letter, button, IE6, IE7, inline-block, letter-spacing, margin負(fù)值, text-indent, 文字, 隱藏

這篇文章發(fā)布于 2013年07月30日，星期二，17:50，歸類于 css相關(guān)。                        閱讀 11995 次, 今日 29 次