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

探讨行框、行内框及行高在网页布局中的差异及IE浏览器的特殊表现

最新推荐文章于 2022-05-14 14:59:31 发布

最新推荐文章于 2022-05-14 14:59:31 发布 · 253 阅读

文章标签：

#ie line-height 行框行内框 vertical-align 垂直对齐

前端专栏收录该内容

13 篇文章

订阅专栏

本文深入解析了HTML元素的行框、行内框和行高的概念，并着重讨论了IE浏览器在处理这些布局属性时的独特行为，包括其对行高的不正确计算方式。通过对比不同浏览器的表现，文章旨在帮助开发者理解并解决网页在IE浏览器中的布局问题。

<!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的显示