首页 > 安全资讯 >

div设高度为1px实现分隔线的效果

11-09-20

设置高度为1px等超小高度在IE下不正常显示的解决方案根据div css网页布局的需要,我们有时候需要设置容器的高度为1px。而设置后在IE中预览,并不是所设置的样子,好象容器被撑开了,达不到想要的最小高度。其实...

设置高度为1px等超小高度在IE下不正常显示的解决方案

根据div css网页布局的需要,我们有时候需要设置容器的高度为1px。而设置后在IE中预览,并不是所设置的样子,好象容器被撑开了,达不到想要的最小高度。

其实这是IE的默认行高所引起的,解决的方法也有很多,下面我们例举了overflow:hidden、line-heigh两种方法

overflow:hidden实现最小高度

XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>mb5u.com</title>  
<style type="text/css">  
  
#YourHomePage_com_cn {  
    width:100%;  
    height:1px;  
    background:#c00;  
    overflow:hidden;  
    }  
  
</style>  
</head>  
<body>  
<div id="YourHomePage_com_cn">?</div>  
</body>  
</html>  
line-height实现最小高度

XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>mb5u.com</title>  
<style type="text/css">  
  
#YourHomePage_com_cn {  
    width:100%;  
    height:1px;  
    background:#c00;  
    line-height:1px;  
    }  
  
</style>  
</head>  
<body>  
<div id="YourHomePage_com_cn">?</div>  
</body>  
</html>  
以上部分文章来自: http://www.mb5u.com/divcssjiaocheng/14307.html

将字体大小设为高度大小

XML/HTML代码
<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>   
此方法来自:http://www.jb51.net/article/9279.htm

DIV高度自适应-----CSS布局中最小高度(min-height)的妙用(兼容IE,FF)

在用div+css排版页面时,发现了如下问题:给一个div加了高度之后,如果内容长度超过了div所定义的高度,在ie与傲游中,div会自动下降;而在firefox(火狐)中,内容会溢出div,如果你的div加了边框,你就会发现,在火狐中内容会溢出。如果你要写一个高度会随内容变长而变长的 div且这个div有最小高度,那么你就不得不想办法解决它了。

        如果你熟悉css,可能你会说,这不是小儿科的问题吗?在css样式表中不就有一个min-height吗?呵呵,如果你是一个div工作者,你应该会在工作中发现IE与傲游根本不支持这个样式,而firefox支持这个样式。

  其实这个问题很好解决,假如你要定义一个最小高度为600px的div,你可以这样写:

CSS代码
{height:auto !important;height:600px; min-height:600px;}  
则div在IE与firefox中都会有一个最小高度,且高度会自适应内容的长度。

作者“shirlly”
 

相关文章
最新文章
热点推荐