日期:2014-05-16  浏览次数:20235 次

大家看看span元素和转换的元素为什么有空隙,各种元素转换有没有兼容性问题,总结下
<!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=gb2312" />
<title></title>
<style type='text/css'>
body { margin:0px; padding:0px; }
div,p { margin:0px; padding:0px; }
</style>
</head>

<body>
<div style='display:inline; border:1px solid #000; width:100px; background-color:#f00'>div转inline</div>
<span style='border:1px solid #000;'>span</span>
<p style='height:110px;'></p>

<div style='display:inline-block; border:1px solid #000; width:100px; background-color:#0f0'>div转inline-block</div>
<span style='border:1px solid #000;'>span</span>
<p style='height:110px;'></p>

<a style='display:block; border:1px solid #000; width:100px; background-color:#0f0'>a转block</a>
<span style='border:1px solid #000;'>span</span>
<p style='height:110px;'></p>

<a style='display:inline-block; border:1px solid #000; width:100px; background-color:#00f'>a转inline-block</a>
<span style='border:1px solid #000;'>span</span>


</body>
</html>

------解决方案--------------------
我感觉是本身的空白导致的。
浏览器就这样没办法。

<div style='display:inline; border:1px solid #000; width:100px; background-color:#f00'>div杞琲nline</div><span style='border:1px solid #000;'>span</span>
<p style='height:110px;'></p>