IE捉迷藏问题及解决方案

最新推荐文章于 2020-02-23 17:08:26 发布

iteye_18104

最新推荐文章于 2020-02-23 17:08:26 发布

阅读量193

点赞数

分类专栏：工作心得文章标签： IE 浏览器 XHTML 工作 HTML

工作心得专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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属性，强制浏览器对其中的内容进行行距调整。

iteye_18104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE捉迷藏问题及解决方案

无标题文档#clear { clear:both; }#layout {background:#e6e6e6;}#layout a:hover {background:#333;}#left { float:left; border:4px solid #333; padding:5px; width:200px; hei...
复制链接

扫一扫

专栏目录