`

当一个行框内各行内框的行高不同时IE(从IE6到IE10都存在)的行高与其它浏览器(chrome,firefox,opera)不同

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
<title>无标题文档</title>
</head>

<body>
<p>
<span style="border:2px yellow solid;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
<span style="background-color:red;line-height:20px;vertical-align:text-top;">little line height</span>this is some text<span style="background-color:green;line-height:100px;vertical-align:text-top">bigger line height</span><br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/>
</span>
</p>
</body>
</html>

 如上代码在IE上和其它浏览器上显示的结果不一样

 

IE的显示

Chrome的显示(firefox,opera都相同)

 红色的行高是20px,然而在IE下却没表现出来,按照标准每个行内框应该有自己的行高的,然而IE把最高的行高作为所有行内框的行高.IE部门的人智商咋就低呢。

 

关于行框,行内框,行高的解释:http://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html

关于垂直对齐的解释:http://www.ddcat.net/blog/?p=233

  • 大小: 23.3 KB
  • 大小: 26.6 KB
分享到:
评论

相关推荐

    CSS行内框架构

    即使元素之间有不同行高,行框也会统一到最大值,确保元素在一行内排列。 6. **元素对行高的影响** - 对于行内元素,如`&lt;em&gt;`, `&lt;strong&gt;`, `&lt;span&gt;`等,它们的`padding`、`margin`、`border-top`和`border-bottom...

    深入理解-CSS-中的行高与基线1

    而行内框(inline box)是浏览器渲染时的一个概念,虽然看不见,但它决定了元素在行内的高度。行框(line box)则是一个包含本行所有元素行内框的虚拟矩形,其高度取决于行内框中最高的那个。 当我们讨论垂直对齐...

    css属性行高line-height的用法详解

    在一些复杂的页面布局中,一行内的不同元素可能会有不同的行高。例如,在HTML代码;"&gt;行高20px。;"&gt;行高50px。&lt;/strong&gt;&lt;span style="line-height:30px;"&gt;行高30px。&lt;/span&gt;&lt;/p&gt;中,由于各个元素的line-height不同,...

    line-height 和 vertical-align 行高与行对齐精解 (图文)

    此外,行框(line box)是一个虚拟的矩形框,代表一行内的所有元素。行框的高度等于这一行内所有元素中行高最大的值,与父元素的高度无关。 在继承行高时,子元素会继承计算值而非原始值。这意味着,无论父元素的...

    全面了解css行高line-height的用法

    - **行距**:从一行文本的底线到下一行文本顶线的垂直距离,包含了整个行高。 - **半行距**:行距的一半,是内容区与行内框之间距离的一半,用于调整行内元素的位置。 三、内容区、行内框与行框 - **内容区**:由...

    CSS中的line-height行高属性学习教程

    2. line box(行框):由行内框组成的虚拟矩形,高度等于本行中最大行内框高度。 3. content area(内容区):围绕文字的不可见区域,高度受font-size和padding影响。 4. containing box(包含框):包围以上三种框...

    CSS教程:行高line-height属性(1)

    行内框在一行中可能存在不同高度,因为不同的元素可能有不同的行高设置。在这种情况下,行框应运而生,它是包含所有行内框的最大矩形,其高度等于该行内最高元素的行高。这意味着,尽管行框的高度与父元素的高度无关...

    CSS — 元素高度的计算思路1

    行框的高度是由行内框(文本、strut、子元素)在垂直方向排列并受到`vertical-align`属性影响所确定的。当`line-height`设为默认值`normal`时,行框模型和盒模型的高度会恰好相等。但是,行内非替换元素的行框模型...

    高中信息技术会考(必修)操作题.doc

    本文档是一个高中信息技术会考的操作题,涵盖了多个方面的信息技术知识,包括信息获取、信息加工、信息交互等。下面是对每个主题的详细解释: 主题一:信息获取 本主题主要讲解如何在互联网上获取信息。包括如何...

    EXCEL技能大赛试题2016.doc

    - 设置单元格边框线,外框为粗单线,内框为细单线,部分行添加双线。 - 设置单元格填充色,如50%的灰色。 8. **列宽与行高**: - 自动调整列宽至最适合的宽度。 - 设置标题行的行高为25磅并垂直居中。 9. **...

    大一计算机word考试题目.pdf

    以上是Word操作中的各种功能应用,涵盖了艺术字、文本格式、段落设置、页眉页脚、表格编辑、边框和底纹、动态效果等多个方面,是Word基础操作的一个综合考核。在实际工作中,熟练掌握这些技巧能有效提高文档处理效率...

    excel范例练习题目

    - **添加边框**: 为表格区域A3:L15添加边框,外框为最粗的单线,内框为最细的单线,并确保表格数据居中显示。 #### 八、工作表复制 - **复制工作表**: 将整张“成绩表”复制为一张新的工作表,命名为“成绩备份表”...

    2022年职称计算机考试中有关电子表格题型试题集.doc

    这些题目涉及到了电子表格软件(可能是永中 Office 或其他类似软件如 Microsoft Excel)的基本操作,主要涵盖以下几个知识点: 1. **公式与函数计算**: - 计算 E 列和 F 列的值,例如 E 列为负1999年,F 列为 E ...

    计算机基础word练习题 参考.docx

    7. **表格操作**:插入并编辑表格(如5行3列,行高1厘米),合并单元格,设置内框线颜色,这些都是Word处理数据时常用的功能。 8. **图形处理**:调整自选图形(如顶端对齐、横向分布,轮廓颜色、大小变化)和剪贴...

    EXCEL操作题2006

    排序时可以设置多个层次的排序规则,如先按全年工资降序,再按10~12月工资升序。筛选则可以按条件(如月平均工资小于5000元)显示数据。 7. **数据图表**:"簇状柱形图"的创建方法类似饼图,选择数据区域,然后在...

    办公软件综合应用竞赛样题.pdf

    - **行列设置**:调整行高和列宽,如第一行行高29,A列列宽30,B、C列列宽10。 - **单元格格式化**:设置单元格的字体、字号、对齐方式和背景色,以及应用百分比格式。 - **边框设置**:设置单元格区域的外边框和...

    2022年全国计算机等级考试一级试题.docx

    - 表格样式:设定列宽为3厘米,行高0.7厘米,外框线和内框线均为红色,具体线条样式不同,第一行单元格底纹设定为特定颜色。 这些操作均体现了在实际应用中对Word的基本操作技能,如文字处理、格式设置、页面布局...

    最新高中信息技术学业水平考试Word、Excel操作题考点总结.docx

    5. **图片插入与调整**:首先将光标定位到需要插入图片的位置,然后选择插入菜单中的图片,从文件中选择图片。图片大小和环绕方式可进一步通过格式菜单进行调整,以适应文档布局。 6. **艺术字插入与编辑**:艺术字...

Global site tag (gtag.js) - Google Analytics