`
shirlly
  • 浏览: 1648005 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

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

    博客分类:
  • CSS
 
阅读更多
设置高度为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中都会有一个最小高度,且高度会自适应内容的长度。
分享到:
评论

相关推荐

    Div+CSS多列布局方法

    `border`设置边框,`list-style`去除列表符号,`margin`和`padding`为零以消除默认内外边距,`float`属性用于浮动元素,`height`设定元素高度,`border-right`和`border-bottom`添加了列之间的分隔线。 1. **一行三...

    [CSS] 用伪元素:after实现分割线和气泡

    这个例子中,`:after`伪元素被定位在父元素的底部,创建了一条水平的分隔线。 接下来,我们谈谈如何使用`:after`创建气泡效果。气泡通常用于表示提示信息或对话框。要创建这样的效果,我们需要定义箭头形状,并将其...

    DIV+CSS打造PHP168经典模板.doc

    - **CSS样式示例**:为了使导航条中的项目之间有分隔线,可以通过设置`border-left:1px solid #b8bec1;`来实现。同时,为了使导航条不紧贴顶部,可以通过设置`margin-top:5px;`来增加一定的间距。 - **代码示例**: ...

    利用after和before实现的一些效果

    ### 使用CSS伪元素`::before`与`::after`实现的实用效果 #### 一、概述 在网页设计中,CSS伪元素`::before`和`::after`被广泛应用于创建各种视觉效果,如图标、装饰图案等。它们能够帮助开发者在不增加额外HTML...

    div动态列宽

    - `#rightbar`: 可拖动的分隔线,用户通过鼠标操作改变其位置来调整`#menu`的宽度。 - `#right`: 右侧的`div`,用于展示`#menu`右侧的内容。 ##### 2. CSS样式设置 ```css .content { width: 200px; background:...

    div-css制作多边形.zip

    在Web开发中,利用div和CSS来创建各种多边形是一种常见的技巧,它可以极大地丰富网页设计的视觉效果。本教程的"div-css制作多边形.zip"文件包含了一系列相关资源,如HTML文件(index.html、readme.html)、相关...

    CSS简单实现重叠线效果

    首先,设置2像素宽的天蓝色实线边框,以区别于分隔线的颜色。然后,将`h2`的`font-size`和`line-height`分别设定为14像素和20像素,以适应文本的阅读需求。 接下来,使用`display:inline-block;`将`h2`元素设置为...

    js实现分割条效果纯js代码

    这个"js实现分割条效果纯js代码"的项目,名为`spliter`,就是基于上述逻辑实现的一个例子。你可以下载源代码进行测试和调试,以适应你的具体需求。通过理解并实践这个例子,你将能更好地掌握JavaScript在网页交互中...

    vue中实现拖动调整左右两侧div的宽度的示例代码

    在本文中,我们将深入探讨如何使用Vue.js来实现一个拖动调整左右两侧div宽度的功能。这个功能允许用户通过拖动一个中间的分割条来动态调整相邻div的宽度。这对于创建可响应的布局和提供用户友好的界面非常有帮助。 ...

    html设置分割线虚线,css border设置虚线样式

    `1px dashed #000`表示1像素宽的虚线,颜色为黑色。如果你想要不同颜色或宽度的虚线,只需更改`#000`和`1px`即可。 除了使用`&lt;hr&gt;`标签,还可以使用HTML元素如`&lt;div&gt;`或`&lt;span&gt;`来创建自定义的分割线,并同样通过...

    div css3 transition属性鼠标悬停导航菜单折叠展...

    然后,当鼠标悬停在菜单项上时,通过修改对应的CSS属性(如宽度、高度或透明度),结合`transition`属性,可以实现平滑的展开和折叠效果。 例如,我们可以创建一个初始宽度为0的折叠菜单,当鼠标悬停时,宽度逐渐...

    javascript 折叠

    1. **平滑过渡**:通过逐步改变高度和`setTimeout`实现动画效果。 2. **边界检测**:防止高度超出设定范围。 3. **状态切换**:点击时自动切换文字提示,使用户明确当前状态。 综上所述,这个折叠效果的实现方式...

    DIV+CSS布局中的几个重难点属性 (2).pdf

    通过结合使用`class`或`id`属性,可以为`span`应用特定的样式,实现文本高亮、颜色变化等效果。例如,我们可以创建一个名为`benefit`的类,将它应用于多个`span`元素,以红色突出文本中的关键点。 ```html 早睡早起...

    CSS定义Div区域的LI列表响应鼠标变色.rar

    /* 在每个列表项之间添加分隔线 */ transition: background-color 0.3s ease; /* 添加过渡效果,使颜色变化更平滑 */ } #listContainer li:hover { background-color: #e0e0e0; /* 鼠标悬停时更改背景色 */ ...

    html 边框虚线.docx

    我们可以为`&lt;div&gt;`标签添加边框虚线,以创建视觉上的分割线。例如: ```html &lt;div style="border: 1px dashed #000;"&gt;&lt;/div&gt; ``` 这里的`border`属性定义了边框的样式,`1px`是边框的宽度,`dashed`表示虚线,`#...

    html+css+div 笔记

    段落和标题通过`&lt;p&gt;`和`&lt;h1&gt;`至`&lt;h5&gt;`标签实现,`&lt;hr&gt;`标签用于插入水平分隔线,`&lt;!—注释文字--&gt;`是注释标记,用于开发者自己的备注。 文档头部信息`&lt;head&gt;`中的`&lt;title&gt;`标签用于设置窗口标题,`&lt;link&gt;`标签则...

    div+css纵向导航如何实现且为导航添加超链接

    5. **列表项样式**:`#menu ul li`设置了背景色、内填充、高度和行高,以及相邻项之间的分隔线,以形成一个垂直的导航条目。 完整的CSS代码如下: ```css body { font-family: Verdana; font-size: 18px; line-...

    EasyUi简单的布局实现源码

    在实践中,可以根据需求进行进一步的定制,如添加拖动分隔线、自定义事件处理等,以满足更复杂的应用场景。希望这个简要的介绍能对你在使用EasyUI时有所帮助,你可以通过阅读官方文档或参考在线示例来深入理解这两个...

    DivCSS网站布局视频教程第3课 CSS设置文字效果

    在本“DivCSS网站布局视频教程第3课 CSS设置文字效果”中,我们将深入探讨如何使用CSS(层叠样式表)来控制网页中的文本样式,从而实现丰富的文字表现力。CSS是网页设计的重要组成部分,它使得我们可以独立于HTML...

    div+css布局大全

    `div`元素是HTML中的一个块级元素,全称为“division”,意为“分隔”或“分区”。在网页布局中,`div`通常用来包裹其他元素,形成网页的各个部分,如头部、主体、侧边栏和底部等。通过设置`div`的CSS属性,我们可以...

Global site tag (gtag.js) - Google Analytics