<!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属性，强制浏览器对其中的内容进行行距调整。
分享到：
发表评论
-
HTML <object> 标签
2010-03-04 22:31 830定义和用法 定义一个嵌入的对象。请使用此元素向您的 XHTML ... -
js代码：字符动画
2010-03-04 22:30 821<!DOCTYPE html PUBLIC " ... -
js代码：浏览器状态栏飞入文字
2010-03-04 22:29 1211<!DOCTYPE html PUBLIC " ... -
CSS+DIV实现的页面优化代码
2010-03-04 22:28 620<!DOCTYPE html PUBLIC " ... -
js代码：飘落的雪花
2010-03-04 22:27 821<!DOCTYPE html PUBLIC " ... -
js代码：渐变图形
2010-03-04 22:26 792<!DOCTYPE html PUBLIC " ... -
正则表达式菜鸟入门
2010-03-04 22:25 675常用的正则表达式主 ... -
jquery学习资料
2010-03-04 22:23 790今天开始看看jquery类库 这是我接触的第三个类库 之前有e ... -
jquery菜鸟入门
2010-03-04 22:23 773转自：http://hi.baidu.com/%B7%C9%D ... -
设置flash透明使div层能显示在其之上
2010-03-04 22:21 962给flash加上这句代码<param name=&quo ... -
Ajax原理步骤
2010-03-04 22:21 1062核心：XMLHttpRequest对象 属性 ... -
ruby打包成gem
2010-03-04 22:20 1297gem 打包： gem build xxx.rb gem 安装 ... -
prototype Ajax.Updater
2010-03-04 22:19 725var url = "/edit/find_topi ... -
ruby日期指令
2010-03-04 22:17 977%A 周日期全称 Saturday %a 周日期缩写 %B ...
相关推荐
##### 2.7 IE捉迷藏的问题 **问题描述**：在复杂的页面布局中，某些内容可能无法正常显示，但可以通过鼠标选中发现这些隐藏的内容。 **解决方案**： - 通过设置`line-height`属性或给容器设置固定的高度和宽度来...
本文总结了CSS浏览器兼容问题的解决方案，涵盖了div的垂直居中问题、margin加倍的问题、浮动ie产生的双倍距离、IE与宽度和高度的问题、页面的最小宽度、DIV浮动IE文本产生3象素的bug、IE捉迷藏的问题等七个方面的...
Margin加倍问题及解决方案 在IE6和IE7中，设置了`float`属性的DIV元素，其`margin`可能会被错误地解释为两倍大小。这是一种已知的bug，可以通过添加`display:inline;`来修正。例如： ```css #IamFloat { float: ...
IE捉迷藏的问题 - **问题描述**：当页面结构复杂时，某些内容可能会出现“隐藏”现象，即内容无法正常显示。 - **解决方案**： - 对容器使用`line-height`属性。 - 或者给容器使用固定的宽度和高度。 - 尽量简化...
IE捉迷藏的问题 **问题描述**：复杂的页面布局中，某些内容可能不会显示出来，但鼠标悬停时可以选中。 **解决方案**： - 对`#layout`使用`line-height`属性。 - 给`#layout`使用固定高度和宽度。 - 尽量简化页面...
**IE捉迷藏问题** - **问题描述**：在复杂的布局中，某些内容可能在视觉上消失，但实际存在。 - **解决方案**：给父级元素添加`line-height`属性或者固定高度和宽度。 ##### 8. **float的div闭合;清除浮动;...
IE“捉迷藏”的问题 在复杂的布局中，某些内容可能在视觉上不可见，但可以通过鼠标选择检测到。这通常是由于元素重叠或布局混乱造成的。解决策略包括使用`line-height`属性或为元素设置固定的高宽比，以及保持页面...
以上是针对IE6、7和8的常见CSS兼容性问题及解决方案。在进行跨浏览器开发时，理解这些差异并采取适当的解决措施，能够确保网页在各种浏览器下表现一致，提升用户体验。随着技术的发展，现代浏览器对CSS的支持更全面...
7. **IE捉迷藏问题**：当`div`包含复杂布局，特别是涉及多列布局时，可能会出现各种定位问题。需要细致检查CSS样式，确保在所有浏览器中都正确显示。 了解并掌握这些技巧，可以有效地解决IE浏览器中的CSS兼容性问题...
7.IE 捉迷藏的问题 当 div 应用复杂的时候，每个栏中又有一些问题。解决方案是使用 `display:block;` 或 `display:inline;` 来解决问题。 解决浏览器兼容问题的 CSS 语法技巧大全涵盖了 IE 和 Firefox 浏览器的...
7. **捉迷藏问题**：在复杂的div布局中，内容可能会隐藏或不可见。这通常是因为布局或浮动问题。解决方法是使用`line-height`属性或为布局设置固定的高和宽。 8. **清除浮动**：避免浮动元素影响非浮动元素的布局，...
7. IE 捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。解决办法是对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。 8. float 的 div ...
7. **捉迷藏问题**：当div嵌套复杂时，内容可能会在某些情况下不可见。解决方法包括使用`line-height`属性或给div设定固定的高和宽，同时保持页面结构简洁。 8. **浮动div的闭合问题**：在CSS布局中，使用浮动（`...
三十一、IE捉迷藏的问题 在IE中，捉迷藏的问题。解决方法是使用统一的方法来处理捉迷藏。 三十二、float的div闭合；清除浮动；自适应高度 在IE和FireFox中，float的div闭合、清除浮动和自适应高度的处理方式不同...
7. **IE的“捉迷藏”问题**： 当复杂的div布局中包含链接等元素时，可能会出现内容显示不全的情况。可以通过设置`line-height`属性或给布局设置固定高度和宽度来解决。 8. **浮动div的闭合和清除浮动**： 清除...
8. **隐藏内容问题（捉迷藏问题）**： 当内容在复杂的布局中不显示时，可能是由于层叠和定位问题。解决方法可以是设置`line-height`属性，或者给容器设定固定的宽高。简化页面结构也有助于减少此类问题。 以上是...
7. **IE的“捉迷藏”问题**：某些内容在页面上显示不出来，但选中时又能看到。这可能是由于布局复杂性导致的。解决方法是为包含这些内容的容器设置`line-height`属性或固定的高度和宽度，简化页面结构。 8. **清除...