`

当一个行框内各行内框的行高不同时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节点操作一例
评论
发表评论

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

相关推荐

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