IE bug 小整理

来源：互联网发布：软件测试工资水平编辑：程序博客网时间：2024/05/21 09:12

IE6 的BUG 真让人头疼。。整理一些浏览器兼容问题，以备不时之需。 div+css扩展框问题浮动下降 <wbr>IE与Firefox兼容性

1.图文混排，容易导致扩展框问题.

<div><img src="http://blog.soso.com/qz.q/images/index_1.jpg" />扩展框问题</div>

这样排版容易导致扩展框问题. 尽量定义宽高给定值：

* 浮动下降问题[size=+0] 加上｛float：left；｝即可```

2.IE6的双倍边距BUG ：

解决办法是加上display:inline

定义页面内容显示方式的属性有两个：display属性和visibility属性。

display属性是用来确定页面元素是否显示和显示方式。

display 属性规定元素应该生成的框的类型。

display属性的取值很多，我们仅将比较常用的一些做一下介绍。

·none：隐藏对象，同时元素所占有的空间也被清除了。

·block：定义元素为块对象。

·inline：定义元素为内联对象。将对象强制作为内联对象呈递，从对

象中删除行

·list-item：定义元素为列表项目。

·inline-table:CSS2未支持。将表格显示为无前后换行的内联对象或

内联容器

所有可视的文档对象都是块对象(block element)或者内联对象(inline element)。例如， div 是一个块对象。 span 是一个内联对象。块对象的特征是从新的一行开始且能包含其他块对象和内联对象。内联对象被呈递时不会从新行开始，能够包含其他内联对象和数据。

改变此属性值对其周围内容布局的影响可能是：

·在属性值设为 block 的对象后面添加新行。

·从属性值设为 inline 的对象中删除一行。

·隐藏属性值设为 none 的对象并释放其在文档中的物理空间。

3.IE6下为什么图片下方有空隙产生

解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.

4.IE6下这两个层中间怎么有间隙

这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left

5.如何对齐文本与文本输入框

遇到此种问题，设置文本框的 vertical-align:middle 就可以了

6.为什么FF下文本无法撑开容器的高度

[size=+0] 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

{

height:auto!important;

height:200px;

min-height:200px;

}

7.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

<param value="http://blog.soso.com/qz.q/transparent" />或者

8.怎样使一个层垂直居中于浏览器中

使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二.

方法二:首先在父级元素定义text-align: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上"margin-right: auto; margin-left: auto; "

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，

只要在每个拆出的div里定义margin-right: auto; margin-left: auto;就可以了。

{

width:300px;

margin-left:auto;

margin-right:auto;

}

9.针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，

但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针

对IE7不错的hack方式就是使用"*+html"，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1 { color: #333; }

* html #1 { color: #666; }

*+html #1 { color: #999; }

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

10.页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{

min-width: 600px;

width:expression_r(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

最狠的手段 - !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.

11.关于容器的包涵关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

1)写两句代码来控制一个属性，区别Firefox与IE：

background range;

*background:green;

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。

2)写两句代码来控制一个属性，区别IE7与IE6：

background:green !important;

background:blue;

//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份.

0 0