`
syangnewer
  • 浏览: 20175 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

DIV中如何设置LINE的高度为1PX

    博客分类:
  • css
阅读更多

[引用]:http://www.meizi.cn/article.asp?id=57

通常我们是这样设置:
#headerLine{margin: 0px; padding: 0px; background: url(dian.gif); height: 1px;width:256px;}
这个在 FireFOX里面有有效果的,可惜在IE里面顶层到不1PX.
那么如何才能在IE中起作用那?下面来看下这个例子.
   最好的方法就是在两个DIV之间加一个注释,就像TABLE一样,TABLE的解决办法是把默认的空格去掉或者加一像素图片,那么DIV中我们就可以这样写: <div id="headerLine"><!-- --></div>为什么要加个注释哪?大家可以想想,注释在页面中是不显示的,那么他的默认值就可能为"0".
 
例1:<div id="headerLine"><!-- --></div> 
#headerLine{margin: 0px; padding: 0px; background: url(dian.gif); height: 1px;width:256px;}
 
  另外还有一个解决方法,我们可以设置行高为1像素.因为在不设置的情况下IE的默认行高是1.5也就是15像素.
 
例2:<div id="headerLine"></div>
#headerLine{margin: 0px; padding: 0px; background: url(dian.gif); line-height: 1px;width:256px;}
 
   最后一个解决办法,就是通过设置overflow(visible | auto | hidden | scroll  注释:hidden :不显示超过对象尺寸的内容.)的原始值来改变它的行高.
 
例3:<div id="headerLine"></div>
#headerLine{margin: 0px; padding: 0px; background: url(dian.gif); overflow: hidden; height: 1px;width:256px;}

 

 

分享到:
评论

相关推荐

    div CSS技巧

    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如: &lt;#div id=”imfloat”&gt; 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解...

    纯css带箭头div

    &lt;div class="content"&gt; 这是框中的文字,可动态显示。高度自动增加,应该不错吧^_^ &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt;&lt;/div&gt; &lt;i&gt;&lt;/i&gt; &lt;/div&gt; &lt;/body...

    设置margin和padding为0可去掉DIV与DIV的空白

    (30px是与设置的div的高度一样) 怎么样去掉DIV与DIV的空白 状况描述: 1)&lt;div&gt;与&lt;div&gt;之间怎么有一条空白线? 2)div图片与图片之间的空白问题? 3)为什么div与div之间设置了margin:0; 和 padding:0; 但是...

    div完美自适应动态上下左右居中

    复制代码代码如下: div { position:absolute; width:500px; height:260px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000;...设置显示文字的标签的高和line-height的高一样就行了!

    关于css中line-height(行高)设置无效的问题的解决方法

    关于css中line-height(行高)设置无效的问题 我们先写下这一串代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style ...

    html+css+js clock钟表

    box-shadow:1px -3px 8px 1px #aaa;} .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60; transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;} .dot_box{width:...

    深入理解CSS行高line-height与文本垂直居中的原理

    前言在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: 复制代码代码如下:&lt;!DOCTYPE ...

    怎样使div中的文字在div的底部显示实现样式

    那么你应该把行高设置成170左右(大约是div高度的二倍,具体的可以调,决定行高的主要原因是字体的大小),如果仅仅是这样的话,那么在IE6下就会出现div高度加倍的现象,解决的方法是在div的css样式里面加上overflow...

    div-css-漂亮的导航条

    border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; ...

    CSS line-height行高上下居中垂直居中样式属性

    line-height:+数字+单位(在CSS布局中我们一般采用像素px为单位)行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。 二、行高应用介绍 ...

    纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中

    1.div中单行文字垂直水平居中。条件:外层div高度已经给定。代码如下: 复制代码代码如下: &lt;style type=”text/css”&gt; .div3{ border:1px solid red; text-align:center; height:200px; line-height:200px; ...

    overflow:hidden line-height clearfix:after使用方法介绍

    2.line-height指的是在DIV中的元素上下居中 比如用在里,则可以将line-height的高度和height的值相等,(height:30px; line-height:30px;)这样可以让文字在内相对于30px垂直居中。比如用在内,像这样成段落的,如果...

    css浏览器兼容性前端人员的必备

    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; 例如: &lt;#div id=”imfloat”&gt; 相应的css为 #IamFloat { float:left; margin:5px;/*IE下...

    jquery实现html页面 div 假分页有原理有代码

    div假分页原理:填充后div的总高度 (1000px) 显示高度(100px) 则页面总数为10页 。当查看第二页时,显示的div高度为100 – 200之间,以此类推 看见页面在翻页 实则为div滚动条移动。 &lt;div id=applications&gt;显示...

    静态网业模板1

    静态网业模板,关于花卉的 body { background-color:#c0c0c0; font-family:Arial, Helvetica, sans-serif; padding:0; font-size:12px;...margin:0px auto auto auto;...padding:5px 0 5px 0;...border: 1px solid #...

    HTML+DIV+CSS

    border: 1px #9999cc dashed;/*边框类型*/ margin: 5px; /*内间距*/ } p{ font-size: 12px; text-indent: 2em; /*首行缩进*/ line-height: 1.5; /*行高*/ padding: 5px; /*外间距*/ } body{ margin:...

    给大家提供一个div+css的标准网页模板

    line-height: 160%; } ul, ol { } a { color: #0098A4; } a:hover { text-decoration: none; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { margin: 0px auto; } img.alignleft { ...

    三星9305收索

    border-bottom:1px solid #e6e6e6}.bdsug-ala h3{line-height:14px;background:url(//www.baidu.com/img/sug_bd.png) no-repeat left center;margin:6px 0 4px 0;font-size:12px;font-weight:normal;color:#7b7b7b;...

    IE6定义1px左右高度的容器示例代码

    复制代码代码如下: div { background:red; line-height:1px; } IE6下这个问题是因为默认的行高造成的,解决的方法也有很多 例如: 复制代码代码如下: overflow:hidden; zoom:0.08; line-height:1px;

    div vertical-align不起作用解决办法

    要加上line-height,并且加上 &lt;!DOCTYPE ...复制代码代码如下: #div-a{ height:60px; line-height:60px; } XHTML代码: 复制代码代码如下: &lt;div id=”div-a”&gt; 软件开发网 &lt;/div&gt;

Global site tag (gtag.js) - Google Analytics