设置高度为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中都会有一个最小高度,且高度会自适应内容的长度。
分享到:
相关推荐
`border`设置边框,`list-style`去除列表符号,`margin`和`padding`为零以消除默认内外边距,`float`属性用于浮动元素,`height`设定元素高度,`border-right`和`border-bottom`添加了列之间的分隔线。 1. **一行三...
这个例子中,`:after`伪元素被定位在父元素的底部,创建了一条水平的分隔线。 接下来,我们谈谈如何使用`:after`创建气泡效果。气泡通常用于表示提示信息或对话框。要创建这样的效果,我们需要定义箭头形状,并将其...
- **CSS样式示例**:为了使导航条中的项目之间有分隔线,可以通过设置`border-left:1px solid #b8bec1;`来实现。同时,为了使导航条不紧贴顶部,可以通过设置`margin-top:5px;`来增加一定的间距。 - **代码示例**: ...
### 使用CSS伪元素`::before`与`::after`实现的实用效果 #### 一、概述 在网页设计中,CSS伪元素`::before`和`::after`被广泛应用于创建各种视觉效果,如图标、装饰图案等。它们能够帮助开发者在不增加额外HTML...
- `#rightbar`: 可拖动的分隔线,用户通过鼠标操作改变其位置来调整`#menu`的宽度。 - `#right`: 右侧的`div`,用于展示`#menu`右侧的内容。 ##### 2. CSS样式设置 ```css .content { width: 200px; background:...
在Web开发中,利用div和CSS来创建各种多边形是一种常见的技巧,它可以极大地丰富网页设计的视觉效果。本教程的"div-css制作多边形.zip"文件包含了一系列相关资源,如HTML文件(index.html、readme.html)、相关...
首先,设置2像素宽的天蓝色实线边框,以区别于分隔线的颜色。然后,将`h2`的`font-size`和`line-height`分别设定为14像素和20像素,以适应文本的阅读需求。 接下来,使用`display:inline-block;`将`h2`元素设置为...
这个"js实现分割条效果纯js代码"的项目,名为`spliter`,就是基于上述逻辑实现的一个例子。你可以下载源代码进行测试和调试,以适应你的具体需求。通过理解并实践这个例子,你将能更好地掌握JavaScript在网页交互中...
在本文中,我们将深入探讨如何使用Vue.js来实现一个拖动调整左右两侧div宽度的功能。这个功能允许用户通过拖动一个中间的分割条来动态调整相邻div的宽度。这对于创建可响应的布局和提供用户友好的界面非常有帮助。 ...
`1px dashed #000`表示1像素宽的虚线,颜色为黑色。如果你想要不同颜色或宽度的虚线,只需更改`#000`和`1px`即可。 除了使用`<hr>`标签,还可以使用HTML元素如`<div>`或`<span>`来创建自定义的分割线,并同样通过...
然后,当鼠标悬停在菜单项上时,通过修改对应的CSS属性(如宽度、高度或透明度),结合`transition`属性,可以实现平滑的展开和折叠效果。 例如,我们可以创建一个初始宽度为0的折叠菜单,当鼠标悬停时,宽度逐渐...
1. **平滑过渡**:通过逐步改变高度和`setTimeout`实现动画效果。 2. **边界检测**:防止高度超出设定范围。 3. **状态切换**:点击时自动切换文字提示,使用户明确当前状态。 综上所述,这个折叠效果的实现方式...
通过结合使用`class`或`id`属性,可以为`span`应用特定的样式,实现文本高亮、颜色变化等效果。例如,我们可以创建一个名为`benefit`的类,将它应用于多个`span`元素,以红色突出文本中的关键点。 ```html 早睡早起...
/* 在每个列表项之间添加分隔线 */ transition: background-color 0.3s ease; /* 添加过渡效果,使颜色变化更平滑 */ } #listContainer li:hover { background-color: #e0e0e0; /* 鼠标悬停时更改背景色 */ ...
我们可以为`<div>`标签添加边框虚线,以创建视觉上的分割线。例如: ```html <div style="border: 1px dashed #000;"></div> ``` 这里的`border`属性定义了边框的样式,`1px`是边框的宽度,`dashed`表示虚线,`#...
段落和标题通过`<p>`和`<h1>`至`<h5>`标签实现,`<hr>`标签用于插入水平分隔线,`<!—注释文字-->`是注释标记,用于开发者自己的备注。 文档头部信息`<head>`中的`<title>`标签用于设置窗口标题,`<link>`标签则...
5. **列表项样式**:`#menu ul li`设置了背景色、内填充、高度和行高,以及相邻项之间的分隔线,以形成一个垂直的导航条目。 完整的CSS代码如下: ```css body { font-family: Verdana; font-size: 18px; line-...
在实践中,可以根据需求进行进一步的定制,如添加拖动分隔线、自定义事件处理等,以满足更复杂的应用场景。希望这个简要的介绍能对你在使用EasyUI时有所帮助,你可以通过阅读官方文档或参考在线示例来深入理解这两个...
在本“DivCSS网站布局视频教程第3课 CSS设置文字效果”中,我们将深入探讨如何使用CSS(层叠样式表)来控制网页中的文本样式,从而实现丰富的文字表现力。CSS是网页设计的重要组成部分,它使得我们可以独立于HTML...
`div`元素是HTML中的一个块级元素,全称为“division”,意为“分隔”或“分区”。在网页布局中,`div`通常用来包裹其他元素,形成网页的各个部分,如头部、主体、侧边栏和底部等。通过设置`div`的CSS属性,我们可以...