DIVとCSSレイアウトで細い線を作る方法のまとめ

1099 ワード

今日divの高度制御を作った時、IEの下でdivの高さを制御するのが小さい時に無効であることに気づきました。特に関連記事を調べました。最終的に解決策ができました。下記の文章を参考にしてください。高さが12 PX以下の線を作成するには、IEで実際の高さより高いものが表示されます。下を見てください。


<style>  
.line{  
background: #CCCCCC;  
height: 6px;  
}</style>  
<div class="line"></div>

は、実際の高さが6 PXより大きいことを示しています。これもIEのBUGと言えるでしょう。以下の3つの方法でこの問題を解決できます。第一の方法をオススメします。1:


<style>  
.line11{  
background: #CCCCCC;  
height: 6px;  
overflow: hidden;  
}</style>  
<div class="line11"></div>

. divの間にスペースを入れます。注：IE 5.0 無効


<style>  
.line12{  
background: #336699;  
line-height: 6px;  
}</style>  
<div class="line12"> </div>


<style>  
.line13{  
background: #CC0000;  
height: 6px;  
font-size: 1px;  
}</style>  
<div class="line13"></div>