针对IE浏览器里面CSS的Bug解决方法

摘要:
IE6双倍边距错误当页面中有多个连续浮动时,例如,此页面上的图标列表是左浮动的,当设置了li的左边距值时,最左侧的情况是双倍的。3像素问题和解决方案当使用浮动容器时,IE6下将产生3px的间隙。有趣的是,当未设置正确容器的高度时,3px将位于正确容器内。设置高度后,它将再次运行到容器的左侧。因此,如果布局精度高,请参考示例29和31中的解决方案。在IE6中,宽度和高度为奇数的BUGIE6也具有奇数的宽度和高度错误。解决方案是将外部相对定位div宽度更改为偶数。

IE6双倍边距bug

当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug。

3像素问题及解决办法

当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29、31的解决方法。

当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[if IE]>中,这样应该可以通过验证了。

超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}

IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

IE6文字溢出BUG
说明:注释造成文字溢出是IE的BUG。

一个空格引发CSS失效
这段代码对<p>的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font- size:300%}加上空格,也就是p:first-letter {font-size:300%}后,显示就正常了。但是同样的代码,在FireFox下看是正常的。按道理说,p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符"-"。IE有个BUG,在处理伪类时,如果伪 类的名称中带有连字符"-",伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。

IE6中奇数宽高的BUG
IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。

IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零,font-size:0

ie6下空标签高度问题
一个空div如果高度设置为0到19px,IE6下高度默认始终19PX。
例如:
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div class="c"></div>

如果不让它默认为19PX。而是0PX的话
解决方法有3种:
1.css里面加上overflow:hidden;
2.div里面加上注释,
<div class="c"><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div class="c">&nbsp;</div>(#换成&)

修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:

  • 确保所有的元素使用”display:inline;”
  • 在最后一个元素上使用一个”margin-right:-3px;”
  • # 为浮动元素的最后一个条目使用一个条件注释,比如:
    <!–[if !IE]>Put your commentary in here…<![endif]–>
  • 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

免责声明:文章转载自《针对IE浏览器里面CSS的Bug解决方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Gojs学习史(一):基本定义neo4j查询语句下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

用HTML,CSS和JavaScript创建iPhone/iPad应用程序

象大多数iPad粉丝和程序员一样,我有一个梦想,那就是如果不需要昂贵的Apple设备,不要繁琐的审批程序,不要为发布应用交钱就能开发iPad 应用程序该多好.现在这个梦想就要实现了,那就是网页应用程序. 那么,怎样才能让网页象看起来象本机程序一样呢?你需要做这些工作: 全屏幕:(去掉浏览器的地址栏和按钮栏);防止窗口滚动和缩放; 响应多点触摸和手势事件;...

发布jar到docker的方法

idea直接发布请看https://www.cnblogs.com/zyb2016/p/13917905.html 1. 上传jar到服务器的指定目录 2. 在该目录下创建Dockerfile 文件 vi Dockerfile 3. 然后将下面的内容复制到Dockerfile文件中 FROM java:8MAINTAINER bingoADD demo-0...

docker 挂载实现容器配置更改为外部文件

docker安装镜像后,每个服务都是独立的容器,容器与容器之间可以说是没关系,隔离独立的。 而且虚拟出来的这些容器里面的基本安装工具都是没有的,比如vi,vim等等。需要使用,还得安装处理。 那么我们安装的容器后我们怎么去修改配置文件。比如nginx我们安装好了之后,而且安装在多个容器实现主从后,我们不可能每台服务器的配置文件都去修改一下,这样就太麻烦了。...

深入k8s:Pod对象中重要概念及用法

Pod对象基本概念 Pod,实际上是在扮演传统基础设施里“虚拟机”的角色;而容器,则是这个虚拟机里运行的用户程序。 Kubernetes 集群中的 Pod 可被用于以下两个主要用途: 运行单个容器的 Pod。"每个 Pod 一个容器"模型是最常见的 Kubernetes 用例;在这种情况下,可以将 Pod 看作单个容器的包装器,并且 Kubernet...

CSS(八)-- 变形(过渡、动画、平移、旋转、缩放)

目录 1.过渡(transition) 1.1transition-property:指定执行过渡的属性 1.2transition-duration:执行过渡需要的时间 1.3transition-timing-function:过得的时序函数 通过贝塞尔曲线指定 steps()分步执行过渡效果 1.4 transition-delay:过...

用原生css实现高斯模糊、黑白等滤镜效果

  —引导— 在CSS3中,有一个强大的属性,那就是filter属性,filter顾名思义就是“滤镜”的意思,用filter属性可以让图片无需PS处理就达到一些简单的显示效果。 —定义和使用— filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。 默认值 none 继承 none 动画支持 是 版本...