Youshang UED Team-金蝶友商网用户体验与前端开发团队

关于IE中DIV的默认BR高度

Tag: 前端开发 — cnscorpio @ 00:19 08-07-2008

在前端开发中经常会用到一些不设置高度的元素，用的最多的，例如清理元素，大家经常会这么写:selector{clear:both;}

他能清理浮动是没错，但是不注意的话就会在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″ />
< title >test BR< /title>
< style type=”text/css”>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,

blockquote,th,td{margin:0;padding:0;}
#testBr{ width:950px;height:10px;background:#000; }
< /style >
< /head >
< body >
< div id=”testBr”>< /div>
< /body>
< /html>

下面是#testBr在不同高度值下的表现：

我就想，是不是默认IE下，一个DIV的高度为15px.于是有了下面的结构，样式和图：

<!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″ />
< title >test BR< /title >
< style type=”text/css” >
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,

blockquote,th,td{margin:0;padding:0;}
.testBr{width:950px;height:5px;background:#000;}
< /style>
< /head>
< body>
< div class=”testBr”>< /div>
< br/>
< div class=”testBr”>< /div>
< /body>
< /html>