云南龙网

  1. 首页 > 云知道 > >

IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总( 二 )

云知道


8:IE下z-index的bug
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现 。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative 。
9: Overflow Bug
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素 。解决方法就是给外包容器.wrap加上position:relative; 。
10: 横向列表宽度bug
如果你使用float:left;把li横向摆列，并且li内包含的a（或其他）触发了 hasLayout，在IE6下就会有错误的表现 。
解决方法很简单，只需要给a定义同样的float:left;即可 。
11: 列表阶梯bug
列表阶梯bug通常会在给li的子元素a使用float:left;时触发，我们本意是要做一个横向的列表(通常 是导航栏)，但IE却可能呈现出垂直的或者阶梯状 。
解决办法就是给li定义float:left;而非子元素a，或者 给li定义display:inline;也可以解决 。
12: 垂直列表间隙bug
当我们使用li 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（li）之间添加空隙 。
解决方法：把aflaot并且清除float来解决这个问题；另外一个办法就是触发a的hasLayout（如定 义高宽、使用zoom:1;）；也可以给li 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格 。
13: IE6调整窗口大小的 Bug
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了 。
解决办法：给body定义position:relative;就行了 。
14: 文本重复Bug
在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug 。
解决办法：给浮动元素添加display:inline; 。
15：链接a的title属性中的文字换行
我们都知道，可以给链接a加上title属性，这样鼠标移动上去会显示title属性定义的 文字，常常用来加一些提示语句，比如说点击查看详情之类的，代码形如：a href=https://www.rkxy.com.cn/dnjc/# title=点击查看详情链接xx/a 。之前一直没有仔细注意过这个东西 。如果鼠标浮动上去要显示更多东西的话，怎么实现呢 。第一 反应是jquery的tooltip插件 。今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以，就想看看怎么做的， 找了下，没发现有Javascript脚本，再往链接的地方一看，终于让我发现了门道了：a href=’#’ target=_blank title=标题: 关于对我校2006年至2009年发展党员工作情况进
发布日期: 2010-5-31 16:05:08 类别：院务通知 点击: 139[05-31] 关于对我校2006年至2009年发展党员工作情况进/a很简单，只要使用 这样的转义符号,即可实现换行 。在一些tooltip要求定制性不高的情况下，这样的显示效果相 当不错，而且是浏览器原生的效果，安逸 。虽然号称精通div css，但是发现一些小小但是很实用的技巧自己还不知道，看来html还有很多东西可以挖掘 。
16：如何去掉点击链接时的虚线
解决方案1：在a href=http://blog.sina.com/wangfengteacheronFocus=this.blur() Mike blog/a
解决方案2：在标签中加入 hidefocusa href=http://blog.sina.com/wangfengteacherhidefocus Mike blog/a
解决方案3: 如果连接太多，可以用外部链接 .HTC 文件 。如，blur.htc
文件内容如下：

复制代码代码如下:
public:attach event="onfocus"
onevent="makeblur()"/public:attach
SCRIPT language=javascript
function makeblur(){
this.blur();
}
/SCRIPT

在 CSS 中加入如下代码：

复制代码代码如下:
A { behavior:url(blur.htc); }

解决方案4 ( 推荐 )：使用CSS样式，可加入代码：a {blr:expression_r(this.onFocus=this.blur())}

推荐阅读


上一篇：使用Txtvoice将文字转换成语音的方法

下一篇：我们穿的麂皮是动物皮吗