font-size定義為0在IE6下的妙用
發(fā)布時(shí)間：2013-11-14 15:45:34 作者：佚名 
我要評(píng)論
我要評(píng)論造成IE6.0下多出來高度的原因是因?yàn)闆]有給div定義字體大小的情況下，默認(rèn)是font-size;12px所以給font-size定義為0就可以解決問題了
我在做網(wǎng)站項(xiàng)目的時(shí)候通常需要定義一個(gè)高度為10px以下的div.代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
</head>
<body>
<div style="background:blue; height:8px"></div>
</body>
</html>
意思是定義一個(gè)高度為8px,藍(lán)色背景的div.在各瀏覽起的實(shí)際效果如下:
以前我解決IE6.0下出現(xiàn)的這種問題的方法是 加overflow:hidden
<div style="background:blue; height:8px;overflow:hidden"></div>
因?yàn)榧觨verflow:hidden有時(shí)候會(huì)出現(xiàn)很多問題.
我在網(wǎng)上翻閱了一下資料,造成IE6.0下多出來高度的原因是因?yàn)?沒有給div定義字體大小的情況下,默認(rèn)是font-size;12px. 所以給font-size定義為0就可以解決問題了.
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
</head>
<body>
<div style="background:blue; height:8px; font-size:0"></div>
</body>
</html>
在各瀏覽起的實(shí)際效果如下:
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
</head>
<body>
<div style="background:blue; height:8px"></div>
</body>
</html>
意思是定義一個(gè)高度為8px,藍(lán)色背景的div.在各瀏覽起的實(shí)際效果如下:
以前我解決IE6.0下出現(xiàn)的這種問題的方法是 加overflow:hidden
復(fù)制代碼
代碼如下:<div style="background:blue; height:8px;overflow:hidden"></div>
因?yàn)榧觨verflow:hidden有時(shí)候會(huì)出現(xiàn)很多問題.
我在網(wǎng)上翻閱了一下資料,造成IE6.0下多出來高度的原因是因?yàn)?沒有給div定義字體大小的情況下,默認(rèn)是font-size;12px. 所以給font-size定義為0就可以解決問題了.
代碼如下:
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
</head>
<body>
<div style="background:blue; height:8px; font-size:0"></div>
</body>
</html>
在各瀏覽起的實(shí)際效果如下:
相關(guān)文章
css中font的簡寫方法(包括粗細(xì)、大小、行高、字體)
css中font的簡寫方法（包括font-weight，font-size,line-height,font-family） 也就是粗細(xì)、大小、行高、字體等等，把它們合在一起寫，需要的朋友可以參考下2013-12-12- css中文字體font-family列表主要是系統(tǒng)自帶的一些、裝Office會(huì)生出來的一些、Windows的一些，感興趣的朋友可以了解下2013-10-10
font-weight 屬性設(shè)置文本的粗細(xì)介紹
css中的font-weight 屬性可以設(shè)置文本的，想必大家都對(duì)它有所了解了，該屬性用于設(shè)置顯示元素的文本中所用的字體加粗，感興趣的朋友可以了解下2013-09-16- CSS font-family字體樣式設(shè)置屬性知識(shí)教程篇，CSS font-family-CSS字體樣式知識(shí)教程。在網(wǎng)頁中我們常常對(duì)網(wǎng)頁中文字設(shè)置字體，我們即可使用font-family實(shí)現(xiàn)字體樣式設(shè)置2013-05-02
- font 屬性的快捷寫法有利于提高書寫效率，本文整理了一些，需要了解的朋友可以參考下2012-12-21
- 直接使用中文名稱時(shí)，在不支持中文的系統(tǒng)或編碼的頁面就有可能會(huì)無法正常顯示。如果使用Unicode碼的話又不方便記憶2012-05-03
使用font-size：0 來去掉inline-block元素之間的空隙方法
像下面圖中的布局，如果排列的元素是等高的話，相信很多人都會(huì)使用浮動(dòng)來布局，不過如果元素不等高的話，不添加多余的標(biāo)簽，浮動(dòng)布局是很難實(shí)現(xiàn)下圖中的效果。如果遇到這種2011-08-02使用font-size：0px 來制作跨瀏覽器的inline-block css屬性
像下面圖中的布局，如果排列的元素是登高的話，相信很多人都會(huì)使用浮動(dòng)來布局，不過如果元素不等高的話，不添加多余的標(biāo)簽，浮動(dòng)布局是很難實(shí)現(xiàn)下圖中的效果。如果遇到這種2011-07-29- CSS可以利用字體屬性設(shè)置頁面中字體的種類、大小、風(fēng)格、粗細(xì)（濃淡）等表現(xiàn)。2011-01-05
- CSS的字體樣式設(shè)置相信許多人再熟悉不過，其實(shí)字體樣式的設(shè)置并不僅僅限于我們平時(shí)常用的那幾個(gè)屬性，本文為您詳細(xì)敘述 font-size 的字體樣式設(shè)置的詳細(xì)屬性。2009-08-29