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