分享css处理浏览器兼容问题上的小技巧（5）
作者：jacky 来源：aliued.com 发布时间：2008-02-03 14:41:00
E: IE捉迷藏现象
捉迷藏问题是IE非常典型的对css支持上的bug, 问题主要出现在IE6浏览器。当div嵌套结构稍微复杂时，就会出现捉迷藏情况。如下面例子：
起初我们写上比较简单的结构代码，如下：
上面代码非常简单，现在我们在里面尝试增加一些内容：
为了让bug显示，我们给上面的xhtml写上css样式，如下：
然后我们到IE7.0 firefox里先后去预览一下，显示一切正常，如下图1。
图1
我们再到IE6去打开它，发现在刚刚打开的时候，看到如下图2的情况，右侧的内容奇怪的消失了。全选页面内容，发现右侧内容是存在的，如果用鼠标移到链接上面，右侧的内容又跑了出来，这就是IE6著名的捉迷藏现象。不仅在目前事例中，在其他情况下也可能出现。造成这种现象的具体触发机制目前还不能合理的归类，至今为止，这种情况只在IE6下出现。
图2
解决这个问题的方法，可以参考positioniseverything.net的网站专家给出的一些建议：
a: 在代码的下面使用一个带有< div style=”clear:both;”>< /div >这样的div来清除悬浮
b: 如果有可能，给layout对象设定width和height
c: 可以尝试给layout和left对象使用position:relative
d: 对layout使用line-height属性，强制浏览器对内容文字进行行距调整。
以上是提供解决浏览器问题的一些技巧，positioniseverything.net网站专家的建议，更重要的是要养成良好的编码习惯来预防捉迷藏情况的发生。
一些问题是浏览器自身的问题，遇到问题发生无法避免的情况下，那就要考虑使用一些css hack了，以下是针对IE6,IE7和firefox可以使用的一些css hack:
a: 针对区别IE6 和IE7/firefox, 可以在要区别的代码后面跟上!important
b:针对IE7/firefox 在css的前面加 [xmlns], 如下面的left属性，如果我想要只针对IE7/firefox起作用，写法如下：
[xmlns] #left {
float:left;
border:4px solid #999;
padding:5px;
width:200px;
height:200px;
}
c: 只针对IE6起作用，可以在css前面加* html,如:
* html #left {
clear:both;
}
d: 只针对IE7起作用，在css里前面加*+html,如:
*+html #left {
clear:both;
}
0
投稿猜你喜欢
- python使用utf8编码，mysql也是utf8编码，是什么问题?后来查了一下，使用一个简单的办法即可：vsql = "ins
- 利用PIL将图片转换为黑色与白色反转的图片，下面笔者小白介绍如何实现。解决方案一：from PIL import Imageimport P
下面通过实例代码给大家介绍python 中pyqt5 树节点点击实现多窗口切换问题，具体代码如下所示：# coding=utf-8impor- 基于jquery.jsPlumb编写拓扑图，供大家参考，具体内容如下要求：实现公司组织结构拓扑关系，可展开，可收拢；动态数据展示；叶子节点可
- 1. 序网页弹框是个很常见的功能，比如需要告知用户消息的时候 (Alert)，需要用户进行确认的时候 (Confirm)，需要用户补充一点信
- 手把手教你实现MYSQL的备份还原示例代码用我比较熟悉的PHP，当然你看完并理解了其中的思路，相信你也可以快速地用你熟悉的语言自己写出来。一
- 前言：书终于完稿了，我也有了一些自己的时间，于是决定将书中讲到的一些比较常见的知识点整理出来，发在Blog里面。当然也不会完全发表出来，毕竟
- 有两张表a表id val 1 a 2 b 3 c 4 d 5 e b表 a_id val 1 null 2 null 3 null 4 nu
- pyyaml模块在python中用于处理yaml格式数据，主要使用yaml.safe_dump()、yaml.safe_load()函数将p
- 题目描述原题链接 :303. 区域和检索给定一个整数数组 nums，处理以下类型的多个查询:计算索引 left&nbs
- JS数组遍历普通函数优点:支持流程控制(break、continue、return)forconst arr = ["A"
- 因为Python是自带文档，可以通过help函数来查询每一个系统函数的用法解释说明。一般来说，关键的使用方法和注意点在这个系统的文档中都说的
- 本文实例讲述了JavaScript实现二叉树的先序、中序及后序遍历方法。分享给大家供大家参考，具体如下：之前学数据结构的时候，学了二叉树的先
- 正则表达式：((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?
- 如何在聊天室实现趣味答题并计分功能？这个创意确实很好，我们可用在聊天室框架中加入一隐含帧（5分钟刷新一次）的做法来实现这一功能。questi
- 首先上一段程序：import numpy as nplist_a = list(range(10))print("list_a:
- 1.创建tfrecordtfrecord支持写入三种格式的数据：string，int64，float32，以列表的形式分别通过tf.trai
- slice:eg:>>>e=[0,1,2,3,4,5,6]>>>s=slice(2,3)>>
- 本章的前面讨论如何使用SQL向一个表中插入数据。但是，如果你需要向一个表中添加许多条记录，使用SQL语句输入数据是很不方便的。幸运的是，My
- 本文实例讲述了原生js实现的贪吃蛇网页版游戏。分享给大家供大家参考。具体实现方法如下：<html><head><
