DIV和CSS排版中制作細(xì)線條的方法小結(jié)
更新時(shí)間:2007年09月09日 21:43:50 作者:
今天制作div的高度控制的時(shí)候發(fā)現(xiàn)IE下控制div的高度很小的時(shí)候無效,特意查了一下相關(guān)文章。
最終有了解決方案,參考下面文章:
如果要制作一條高度小于12PX(大約)的線條,在IE中會(huì)顯示出高于實(shí)際高度的,看下面。
<style>
.line{
background: #CCCCCC;
height: 6px;
}</style>
<div class="line"></div>
可看出實(shí)際高度大于6PX,這也算是IE的一個(gè)BUG吧。以下三種方法可解決這個(gè)問題,推薦使用第一種方法。
1:
<style>
.line11{
background: #CCCCCC;
height: 6px;
overflow: hidden;
}</style>
<div class="line11"></div>
2. div之間要加個(gè)空格 注:IE5.0 無效
<style>
.line12{
background: #336699;
line-height: 6px;
}</style>
<div class="line12"> </div>
3:
<style>
.line13{
background: #CC0000;
height: 6px;
font-size: 1px;
}</style>
<div class="line13"></div>
最終有了解決方案,參考下面文章:
如果要制作一條高度小于12PX(大約)的線條,在IE中會(huì)顯示出高于實(shí)際高度的,看下面。
復(fù)制代碼 代碼如下:
<style>
.line{
background: #CCCCCC;
height: 6px;
}</style>
<div class="line"></div>
可看出實(shí)際高度大于6PX,這也算是IE的一個(gè)BUG吧。以下三種方法可解決這個(gè)問題,推薦使用第一種方法。
1:
復(fù)制代碼 代碼如下:
<style>
.line11{
background: #CCCCCC;
height: 6px;
overflow: hidden;
}</style>
<div class="line11"></div>
2. div之間要加個(gè)空格 注:IE5.0 無效
復(fù)制代碼 代碼如下:
<style>
.line12{
background: #336699;
line-height: 6px;
}</style>
<div class="line12"> </div>
3:
復(fù)制代碼 代碼如下:
<style>
.line13{
background: #CC0000;
height: 6px;
font-size: 1px;
}</style>
<div class="line13"></div>
相關(guān)文章
使用display:none時(shí)隱藏DOM元素?zé)o法獲取實(shí)際寬高的解決方法
這篇文章主要介紹了使用display:none時(shí)隱藏DOM元素?zé)o法獲取實(shí)際寬高的解決方法的相關(guān)資料,需要的朋友可以參考下2022-07-07非常不錯(cuò)的關(guān)于IE與FireFox的js和css幾處不同點(diǎn)[轉(zhuǎn)自星火燎原]
非常不錯(cuò)的關(guān)于IE與FireFox的js和css幾處不同點(diǎn)[轉(zhuǎn)自星火燎原]...2007-09-09