IE浏览器下的CSS问题小结

2022-12-23首页软件教程IE下特殊情况

以下是14种特殊情况。你可以看到哪个问题出了问题。这些仅供参考：

1、文字本身大小不兼容。相同的宋体文本，字体大小为：14px，在不同的浏览器中占用的空间不同。在IE下，它实际上占据了16px的高度和3px的底部空间。在FF中，它实际上占据高度17px，顶部1px，底部3px。歌剧之下更不一样。解决办法：设置文本行高。确保所有文本都有默认的行高值。这很重要，我们不能容忍1px 的高度差异。

2、ff下容器高度受到限制，即容器定义了高度后，容器边框的形状就确定了，不会被内容扩大。但在ie下，会被内容扩大，高度限制无效。所以不要轻易定义容器的高度。

3、集装箱横向爆裂问题。如果浮动容器没有定义宽度，ff下的内容会尽可能拉伸容器的宽度，ie下会优先进行内容换行。因此，对于内容可能破裂的浮动容器需要定义宽度。

小实验：如果你有兴趣，可以看一下这个实验。在不同的浏览器中测试以下每个代码。

a.div style=border:1px 纯红色；height:10px/div div样式=border:1px纯红色；width:10px/div

C。 div 样式=border:1px 纯红色；float:left/div div 样式=border:1px 纯红色；overflow:hidden/div

上面的代码在不同的浏览器中是不同的。实验源于使用高度值较小的div。 div 样式=height:10px;overflow:hidden/div。小高度值应与overflow:hidden一起使用。实验只是为了好玩。我想指出的是，浏览器对容器边界的解释有很大不同，容器内容的影响也各不相同。

4.最讨厌的双边距bug。为IE6下的浮动容器定义margin-left或margin-right。实际效果是价值的两倍。解决办法是为浮动容器定义display:inline。

5.镜像margin bug，当外层元素中有浮动元素时，如果外层元素定义了margin-top:14px，则会自动生成margin-bottom:14px。类似的问题也会出现在padding中，这都是IE6下的特长。此类bug发生的情况比较复杂。远远不止这种发生情况，还没有得到系统的梳理。解决方案：在外部元素上设置边框或浮动。

延伸：ff和ie下容器的margin-bottom和padding-bottom的解释有时不一致，好像和这个有关。

6.吞咽现象。还是IE6，上下两个div。上面的div有背景，但是我发现下面没有背景的div也有背景。这就是吞咽的现象。与上面的背景吞没现象相对应，滚动下也存在缺边框的现象。解决方案：使用zoom:1。这个zoom好像是专门为了解决ie6的bug而设计的。

7. 评论也会产生bug~~~多一头猪。这是前人用来总结这个bug的文案。在IE6的这个bug下，你会看到“pig”这个词在页面上出现了两次。重复内容的数量根据评论的数量而变化。解决办法：使用![if !IE] picRotate start ![endif]方法来写注释。

8.img 下留有空格。让我们看看这段代码有什么问题：

分区

img src=mce_src=/

/div

打开div的边框，发现图片的底部并没有靠近容器的底部。这是由于img后面的空白字符引起的。要消除它，你必须这样写

分区

img src=mce_src=//div

最后两个标签应该彼此相邻。这个bug在ie7下依然存在。解决办法：为img设置display:block。

9. 失去行高。 div 样式=line-height:20pximg/text/div。不幸的是，单行文本的行高效果在IE6下消失了。原因是img/inline-block元素和inline元素写在一起了。解决方案：使img和text都浮动。

延伸：大家都知道img的align包括text-top、middle、absmiddle等，你可以尝试调整img和text，让它们在ie和ff下保持一致。你会发现，无论你怎么调整，都不会满意。只需让图像和文本浮动并用边距调整它们即可。

10.透明层应单独使用。也许您将clear属性直接放入下面的内容层中以节省代码。这是有问题的。不仅在ff和op下会失去margin效果，而且在ie下一些margin值也会失效。

div 样式=background:red;float:left;dd/div

div 样式=clear:both;margin-top:18px;background:greenff/div

11.ie在overflow:hidden下，绝对图层position:absolute或相对图层position:relative无效。解决方案：将position:relative或position:absolute添加到overflow:hidden。另外，ie6支持overflow-x或overflow-y功能，但ie7和ff不支持。

12、ie6下有一个严重的bug。如果float 元素没有定义宽度，并且内部有一个div 且定义了height 或Zoom:1，则该div 将填充整行，即使您为其指定了宽度。如果浮动元素用作布局或复杂容器，则必须为其指定宽度。

13. IE6下的Bug，绝对定位的div包含相对定位的div。如果给内层中相对定位的div赋予特定的高度值，则内层中的相对层的宽度值为100%，并且支持外层中的绝对层。大的。解决办法是给内层相对层赋予float属性。

14.width:100%在IE中使用非常方便。它会逐层搜索宽度值，忽略浮动层的影响，在ff下搜索，直到浮动层结束。这样就只能给中间的所有浮动层加上width:100%了。 疲劳的。 Opera 很好地学习了这一点并遵循了ie。

IE的浮动bug（ie6、ie7）困扰着前端工程师。最常见的现象是：浮动元素的父元素拖动滚动条时边框缺失。这个问题的解决方案是使浮动元素可布局。

很多情况下，因为页面的宽度需要自由伸缩，所以宽度不能声明为固定值，但是我们可以设置*height:1%;*在这里很重要，因为*只能被ie7解析而以下版本，而ie8无法识别这种写法，因此可以使用这种写法来区分IE8和其他版本的IE浏览器。它也是对互联网上流行的IE8 beta1 hack的补充。

一些常用的黑客测试

* html p {color:red;}支持IE6但不支持FF IE7 IE8b

*+html p {color:red;}支持IE7 IE8b但不支持FF IE6

p {*color:red;}支持IE7 IE6但不支持FF IE8b

IE8在CSS3中添加了子字符串匹配属性选择器（子字符串匹配属性选择器）。具体规则与正则规则中的匹配非常相似：

E[att^=val] //以val开头的子串

E[att$=val] //以val结尾的子串

E[att*=val] //子串包含val

IE8支持最基本的CSS2.1选择器，包括但不限于：[:first-line]和[:first-letter]。

对于CSS2.1中的生成内容部分，即使用伪元素：before和：after添加文本内容，在IE8中支持不完全。

对于几乎其他浏览器都支持的opacity和RGBA，在IE8中仍然不支持。

原本用来区分IE的HACK在IE8中基本失效（如*property:value、*property:value等）。

IE原来的列表项空白bug在IE8中仍然存在。

原来的IE z-index bug 在IE8 中仍然存在。

IE8中出现了一个新的bug：当line-heigth小于正常值时，超出的部分会被裁剪掉。

IE8 中仍然不支持display:table。

IE8 中仍然不支持border 的透明值。

在IE8中，@import仅支持三层嵌套。

IE8不支持透明边框

IE8出现新BUG：line-heigth BUG

Hack仅适用于IE8，它可以是属性或类

BUG描述：

页面上的某个DIV使用position:relative，结合top=-25px等元素进行定位。它在FF 和IE7 下表现正常，但在IE6 中，DIV 将随着鼠标滚动而滚动。

分析：

这是IE6中的一个已知BUG：当position:relative元素被具有overflow:auto/scroll属性的块级元素包含时，它将表现出position:absolute行为。

解决方案：

1. 为包含块元素添加属性position:relative。

2、去掉元素的position:relative属性，使用默认的静态定位，通过margin-top等属性实现类似的效果。

IE6的终结即将到来，这对于我们前端开发者来说无疑是一个令人欣慰的消息。但这个结局还没有迫在眉睫，所以我们还是力争最后的胜利，利用各种hack和方法来规避IE6的两侧。存在间距、透明背景、重复文字等一堆Bug。以下是IE6 :修复Bug的10个技巧转载自前端观察（翻译自www.sitepoint.com）

1.使用文档类型

您应该始终在每个HTML 文件的标头中使用DOCTYPE，我们建议使用严格版本，例如：

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://imgbuyun.weixiu-service.com/up79/202210/hmjbwt3umub.dtd

或者，对于XHTML，请使用：

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict //EN http://imgbuyun.weixiu-service.com/up79/202210/b3t5lbbbpjt.dtd

您必须处理的最棘手的事情是IE6 进入怪异模式，这很奇怪。

2.设置position:相对

将元素设置为position:relative可以解决很多问题，特别是如果您遇到过隐藏或奇怪对齐的框。显然，您需要非常小心，因为绝对定位的子节点可能会因此被重新定位。

3、设置浮动元素为display:inline

带有margin属性的浮动元素可能会导致著名的IE6双边距问题。例如，您为某个元素指定了5px 的margin-left，但它在IE6 中实际显示为10px。 display:inline将解决这个问题，虽然不是必需的，但你的CSS仍然有效。

4. 将元素设置为hasLayout

许多IE6（和IE7）渲染问题可以通过设置元素的hasLayout 来解决。这是一个IE 内部属性（被IE 隐藏，有关haslayout 的更多信息，请参阅此处），用于确定内容相对于其他元素的布局和定位方式。如果您需要将内联元素（例如链接）设置为块元素，或者应用透明效果，则也可能需要设置hasLayout。

设置hasLayout最简单的方法是在CSS中设置高度或宽度（也可以使用缩放，但缩放不是CSS标准的一部分）。我们建议设置实际大小，但问题是这是不现实的，您可能需要使用height:1%。如果父元素没有设置高度，则元素的实际高度不受影响，此时启用了hasLayout。

5.修复重复文字的bug

复杂的布局可能会触发错误，其中浮动元素的最后一个字符可能出现在清除元素下方。这里有几种解决方案，有些是完美的，但一些尝试和错误是必要的：

.确保所有元素都使用display:inline；

.在最后一个元素上使用margin-right:-3px ；

.对浮动元素的最后一项使用条件注释，例如：

!--[if !IE]将您的评论放在这里.[endif]--

.在容器的最后一个元素中使用空div（还需要将宽度设置为90或类似宽度。

您还可以访问positioniseverything.net 以获取该问题的完整介绍。

6. 仅在可点击和可悬停的元素上使用标签

IE6仅识别a标签上的CSS悬停效果。

您还可以在基于JavaScript 的组件中使用它们来控制它们，以便它们保持键盘可操作状态。有一些替代方案，但a 标签比其他标签更可靠。

7.使用!important或高级选择器来区分IE6

仍然可以编写专门适用于IE6 的代码，而无需在额外文件中使用传统的hack 或条件CSS。例如，最小高度可以通过以下代码定义：

复制code代码如下：

元素{

最小高度： 20em；

height: 自动！重要；

高度： 20em；

#元素[id] {

高度： 自动；

}

8.避免使用百分比单位

百分比使IE 感到困惑。除非您可以精确控制每个父元素的大小，否则最好的预防措施是可能的。您可以通过!important 在其他浏览器中继续使用百分比，例如：

身体{

margin: 2% 0 !重要；

边距： 20px 0;

}

9. 尽早测试并持续测试

不要等到您的网站或应用程序完成才测试IE6；问题可能会更严重，并且需要更多时间来纠正。如果你的网站在Firefox和IE6中都能正常运行，那么在其他浏览器中一般不会出现问题。

10.重构你的代码

经常发生的情况是，修复错误比重新考虑布局问题需要更长的时间。对HTML 进行小的更改和一些简单的CSS 通常会更有效。这可能意味着您放弃完美的代码，但长期问题会减少，并且您将来会更好地了解如何处理它们。

-------------------------------------------------- -------------------------------------------------- ---

让IE6支持PNG格式的图片

用法：

首先在记事本中复制以下代码，然后另存为pngbehavior.htc（名称可以任意）：

复制code代码如下：

public:component lightWeight='true'

public:attach event='onpropertychange' onevent='propertyChanged()' /

public:attach event='onbeforeprint' onevent='beforePrint()' for='window'/

public:attach event='onafterprint' onevent='afterPrint()' for='window'/

脚本

支持的var=/MSIE ((5.5)|[6789])/.test(navigator.userAgent)

navigator.platform=='Win32';

var realSrc;

var BlankSrc='空白.gif';

var isPrinting=false;

如果（支持）fixImage();

函数属性更改（）{

if (!supported || isPrinting) return;

var pName=event.propertyName;

if (pName!='src') return;

//如果没有设置为空白

if (!new RegExp(blankSrc).test(src))

修复图像（）；

};

函数修复图像（）{

//获取源文件

var src=元素.src;

//检查实际变化

if (src==realSrc /.png$/i.test(src)) {

元素.src=空白Src;

返回；

}

if ( !new RegExp(blankSrc).test(src)) {

//备份旧的src

真实源=源；

}

//测试是否为png

如果（/.png$/i.test（realSrc））{

//设置空白图像

元素.src=空白Src;

//设置过滤器

element.runtimeStyle.filter='progid:DXImageTransform.Microsoft。' +

'AlphaImageLoader(src='' + src + '',sizingMethod='scale')';

}

别的{

//删除过滤器

element.runtimeStyle.filter='';

}

}

函数beforePrint() {

正在打印=true;

element.src=realSrc;

element.runtimeStyle.filter='';

真实源=空；

}

函数afterPrint() {

正在打印=假；

修复图像（）；

}

/脚本

/public:组件

最后，将此代码添加到您的css 文件中：

img {behavior: url(pngbehavior.htc);} 首页软件教程

wps表格出现“输入非法值”的解决方法

wps中如何快速翻页

如何完全合并wps表格中的单元格

wps2019怎么插入环形图？wps2019插入环形图教程

wps批注怎么删除_wps删除旁边的批注教程

WPS Office表格怎么筛选重复数据

WPS表格中新建表格样式的方法

wps演示怎样插入饼状图

WPS公式编辑器不能使用公式选项为灰色的不可用状态 如何解决它

WPS表格设置自动输入数值的方法步骤