首先要看DIV有无内容,然后才会决定谁影响其高度:
1.当DIV为一个空标签的时候:DIV有一个默认的高度(大约20px左右吧),如果hiehgt的值小于这个数字,DIV不会有任何反 应,大于则可以控制;而line-height在这儿根本没有用,因为没有内容,所以也就不存在行高了。
2.当 DIV标签内有内容时(哪怕是一个 ):DIV的高度依然是默认的(依旧是20px左右),而这时候的height仍然只能 设置大于这个数的值,否则DIV不会受控制;但是,这时候却可以使用line-height来控制DIV的高度,准确来说是控制DIV内的内容行高,使 DIV受行高的变化而变化。
不过,如果你设置了height的值,那么当line-height小于height的值的时候,DIV取的是height的 值;如果line-height大于height的值,那这时候影响DIV高度的就是line-height的值了。
在其它的浏览器就不会出现这个问题,也就是说line-height大于height的时候,DIV的高度依旧是height,最多是看不见内容, 但DIV的高度不会被line-height所控制。
期间有一个朋友评论说“使用overflow:hidden;第二种情况也是由height来控制了”:嘿嘿, 试了一下,的确如此,当DIV的高度被line-height撑高的时候,使用overflow:hidden;则会使超出DIV高度那部份的内容不可 见,从而使DIV的高度受hiehgt控制。
分享到:
相关推荐
IE6和IE7是早期的浏览器版本,它们在解析CSS时存在一些已知的bug和不一致之处,尤其是对于div元素的高度设置。在现代浏览器中,我们可以通过简单的CSS属性如`height`或`min-height`来控制元素的高度,但在IE6和IE7中...
### IE6特有bug兼容性问题整理 #### 1. 浮动(float)与相邻非浮动元素的表现差异 - **问题描述**: 在不同浏览器中,对于`float`元素和相邻非`float`元素的处理方式存在差异。具体表现为,在IE6中,当一个元素设置...
6. **hover样式仅限标签**:IE6只支持在标签上应用`:hover`样式。为了跨浏览器兼容,可以使用JavaScript来模拟其他元素的hover效果,但要注意这样做可能影响页面的可访问性,重要功能不应依赖JavaScript hover。 7....
### div错位解决IE6/IE7/IE8样式不兼容问题 在Web开发中,兼容性一直是开发者面临的重要挑战之一。特别是在早期浏览器版本中,如Internet Explorer 6(IE6)、IE7 和 IE8,由于这些浏览器对于CSS的支持存在较大差异...
但在IE6、7中,若要让内容在div内垂直居中,除了设置`vertical-align:middle`,还需要将`line-height`设置为与div相同的高度。这种方法需要注意内容不应换行,否则可能导致对齐失效。 其次,`margin`加倍问题主要...
### IE特有Bug知识点解析 #### 一、概述 Internet Explorer(简称IE)作为曾经市场上最主流的浏览器之一,在其发展过程中积累了一系列特有的兼容性问题。这些问题是由于IE浏览器自身的技术限制以及对某些Web标准的...
IE6不支持`min-height`属性,但可以通过结合使用`height`和`!important`规则,以及一个错误的`height`声明来模拟最小高度的效果。例如: ```css #element { min-height: 20em; height: auto !important; /* 对...
本文总结了网页设计师DIV+CSS面试中常见的问题和解决方法,涵盖了超链接点击后 hover 样式的消失、IE6 的 margin 双倍边距 bug、火狐浏览器下文本无法撑开容器的高度、中火狐浏览器下文本无法撑开容器的高度、Web ...
- 在IE6中,设定`height`或`width`为固定值时,如果内容超出这个值,div会自动扩展,而在其他标准浏览器中,div的高度和宽度会保持固定。 - `min-height`在IE6中不受支持,导致在内容高度大于设定值时,div不会...
这个bug表现为在IE6下,当两个浮动(floated)的div相邻时,它们之间会出现一个3像素的间距,这与在其他浏览器(包括更新版本的IE)中的表现不符。这个问题的根源在于IE6对浮动元素的盒模型处理方式与其他浏览器不同...
标签“3像素bug”和“ie6下3像素bug”就是对这一特定问题的简短概括,用于表明这是一个在IE6环境下特有的bug。 在给出的代码示例中,展示了两个div元素的HTML和CSS代码片段。第一个示例中,两个div分别设置了不同的...
本教程主要关注CSS中的DIV元素以及如何处理在不同浏览器(如IE6、IE7、IE8和火狐)之间的兼容性问题。在CSS中,`div`元素通常被用作布局容器,帮助组织页面结构。然而,由于各个浏览器对CSS标准的实现存在差异,导致...
本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...
**问题描述**:在IE6中,当`img`标签与文本在同一行内时,文本的`line-height`效果会消失。 **解决方案**:使`img`和文本都浮动起来,并通过`margin`来调整它们的位置。 ##### 10. `clear`层单独使用问题 **问题...
##### 2.6 DIV浮动IE文本产生3像素的bug **问题描述**:当左边的对象浮动后,右边的对象内的文本可能会出现3像素的间距问题。 **解决方案**: - 通过调整左边对象的`margin-right`属性来解决。 **示例代码**: ```...
### 如何兼容IE7和IE8—Div+CSS教程 #### 概述 本文将详细介绍如何在使用Div+CSS布局时实现对Internet Explorer 7(IE7)与Internet Explorer 8(IE8)的兼容性支持。随着Web标准的发展与浏览器技术的进步,IE7和...
此外,IE6还有一个著名的“双倍边距BUG”,当一个浮动元素设置`margin-left`时,IE6会计算两次,解决办法是: ```css div { float: left; margin-left: 10px !important; /* 解决IE6双倍边距 */ margin-left: 10...
在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个著名的布局bug,这个问题主要涉及到`<select>`元素与`<div>`元素的层叠上下文(Z-index)处理。当一个`<div>`元素试图遮盖页面中的下拉列表框`<select>`时...