`

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

ie line-height 行框 行内框 vertical-align 垂直对齐 
阅读更多 
<!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
分享到：
| DOM访问方法说明及DOM节点操作一例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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. **艺术字插入与编辑**：艺术字...

Magicbox
Global site tag (gtag.js) - Google Analytics