IE捉迷藏問題及解決方案
<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屬性，強制瀏覽器對其中的內容進行行距調整。
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章