網(wǎng)頁(yè)頁(yè)面里使用 inline-block 元素時(shí)經(jīng)常需要隱藏其文字,
比較流行的方法是將 line-height 的值設置得很大,
然后配合 overflow: hidden 來(lái)隱藏文字。
請容許我主觀(guān)臆斷地認為過(guò)大的行高會(huì )影響渲染效率,
而行高不夠又可能在用戶(hù)對頁(yè)面進(jìn)行放大操作時(shí)露出“馬腳”(即未能被隱藏的部分)。
是否當 line-height:0 時(shí)對 Webkit 內核就沒(méi)有辦法了?
我想到利用透明文字來(lái)解決這一兼容問(wèn)題,
并最終整理如下:
font-size:0; /* for firefox & opera */ color: transparent; /* for webkit */ line-height:0; overflow:hidden; /* for IE */
上面是第一種方法,下面說(shuō)第二種方法
display:block; line-height:0px; text-indent:-9999px; overflow:hidden;
自測后兼容的瀏覽器如下:
IE 6-8
Firefox 1-4
Opera 9-10
Safari 3-5
Chrome 1-6
Copyright@ 2011-2016 版權所有:大連千億科技有限公司 遼ICP備11013762-3號 google網(wǎng)站地圖 百度網(wǎng)站地圖 網(wǎng)站地圖
公司地址:大連市沙河口區中山路692號辰熙星海國際2317 客服電話(huà):0411-39943997 QQ:2088827823 37482752
法律聲明:未經(jīng)許可,任何模仿本站模板、轉載本站內容等行為者,本站保留追究其法律責任的權利! 隱私權政策聲明