DIV和CSS排版中制作细线条的方法小结
程序员文章站
2024-03-31 13:34:04
今天制作div的高度控制的时候发现ie下控制div的高度很小的时候无效,特意查了一下相关文章。 最终有了解决方案,参考下面文章: 如果要制作一条高度小于12px(大约)的线...
今天制作div的高度控制的时候发现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>