<!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>无标题文档</title>
<style>
#clear { clear:both; }
#layout {background:#e6e6e6;}
#layout a:hover {background:#333;}
#left {
float:left;
border:4px solid #333;
padding:5px;
width:200px;
height:200px;
}
#right div {
border:3px solid #0c0;
background:#dde;
}
</style>
</head>
<body>
<div id="layout">
<div id="left">#left <a href="#">链接</a></div>
<div id="right">#right<br />
被隐藏的文本<br />
<a href="#">链接</a><br /><br />
<div>#right中的div.<a href="#">链接</a></div>
#right中的文本.<a href="#">链接D</a>
<div>#right中的div。<a href="#">链接</a></div>
#right中的文本。<a href="#">链接</a></div>
</div>
//<div id="clear">bottom</div>
</div>
</body>
</html>
解决方案:
1.对页面的对象使用float后,在最后使用带clear:both;的div来对页面进行一些浮动上的清理工作,并尽量避免对#layout使用background;
2.如果可能,可以给#layout设置高度宽度。能消除一些捉迷藏的影响,但会对页面有所限制;
3.可以尝试给#layout和#left使用position:relative;
4.对#layout使用line-height属性,强制浏览器对其中的内容进行行距调整。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#clear { clear:both; }
#layout {background:#e6e6e6;}
#layout a:hover {background:#333;}
#left {
float:left;
border:4px solid #333;
padding:5px;
width:200px;
height:200px;
}
#right div {
border:3px solid #0c0;
background:#dde;
}
</style>
</head>
<body>
<div id="layout">
<div id="left">#left <a href="#">链接</a></div>
<div id="right">#right<br />
被隐藏的文本<br />
<a href="#">链接</a><br /><br />
<div>#right中的div.<a href="#">链接</a></div>
#right中的文本.<a href="#">链接D</a>
<div>#right中的div。<a href="#">链接</a></div>
#right中的文本。<a href="#">链接</a></div>
</div>
//<div id="clear">bottom</div>
</div>
</body>
</html>
解决方案:
1.对页面的对象使用float后,在最后使用带clear:both;的div来对页面进行一些浮动上的清理工作,并尽量避免对#layout使用background;
2.如果可能,可以给#layout设置高度宽度。能消除一些捉迷藏的影响,但会对页面有所限制;
3.可以尝试给#layout和#left使用position:relative;
4.对#layout使用line-height属性,强制浏览器对其中的内容进行行距调整。