之前介绍过IE浏览器的几种BUG解决的方法,今天我们继续研究IE的BUG。尽管IE6即将被淘汰,但是了解这些也对将来解决问题也是有一定帮助的。好了,闲话不多说,咱们继续看IE的BUG。

1、IE6下PNG图片透明Bug

Png在IE6下显示有问题,这大家都知道。有的时候IE6下,用png的图片用JQ也会出现问题,解决办法只能换成gif的。还有一个问题,使用png24或png32图片,质量是没有问题了,可引发另一个头痛的问题,就是IE6下面显示图片会有一层淡兰色的背景。

解决办法:

1)用滤镜解决,但是问题是使用了滤镜,链接将会失效。

CSS代码:

.img{
background:url('http://justflyhigh.com/img/front/ico_notice.png');
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://justflyhigh.com/img/front/ico_notice.png',sizingMethod='scale');
}

HTML代码:

<img src="http://justflyhigh.com/img/front/ico_notice.png" width="247" height="216" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://justflyhigh.com/img/front/ico_notice.png', sizingMethod='scale');" alt="梦龙小站" />

2)DD_belatedPNG.js

可以使用DD_belatedPNG来产现,具体实如何实现

2、修复margin的负值

负边距在我们平时的Web制作中,为了达到一定的效果也时常用到,而在现代浏览器中使用负的边距并不会有任何问题,但是在IE6下对负的margin值并不友好,除非你在目标元素上使用“position:relative”属性:

div {
margin: -20px;
}
* html div {
position: relative;
zoom: 1;
}

3、修复overflow在IE6下清浮动问题

div {
    overflow: hidden;
    _zoom: 1;
}

4、IE6的固定定位

网站上都有固定在某一个位置的需求,这时候大家首选都是固定定位,但是在IE6下就会不支持。那么怎么办呢?请往下看吧。

解决办法:

1)用绝对定位模拟固定定位

CSS代码:

html{height:100%;overflow:hidden; position:relative;}
body{margin:0;height:100%;overflow:auto;}
.page{height:2000px;}
.box{width:200px;height:100px;background:Red; position:absolute;left:100px;top:100px;}

HTML代码:

html{height:100%;overflow:hidden; position:relative;}
body{margin:0;height:100%;overflow:auto;}
.page{height:2000px;}
.box{width:200px;height:100px;background:Red; position:absolute;left:100px;top:100px;}

5、IE6下文字溢出

若两个浮动元素之间有注释语句的话,那么在IE6下会出现溢出的文字。

CSS代码:

.box{width:400px;}
.left{float:left;}
.right{float:right;width:400px;}

HTML代码:

<div class="box">
<div class="left"></div><!--IE6下文字溢出bug-->
<div class="right">↓这是多出来的一只猪</div>
</div>
<!--
不要再两个浮动元素加注释
-->

解决办法:

1)把注释文字在其他地方添加即可

2)在浮动元素父级元素中添加固定高度,和overflow:hidden;

IE常见的CSS的BUG(二)的更多相关文章

  1. IE常见的CSS的BUG(一)

    2011年6月,我毕业了.2012年我接触了CSS,本以为会好过些能赚点钱了,可谁知,Internet Explorer(下称IE),这个前端工程师的噩梦浏览器让我不再那么好过了.各种出现在IE身上的 ...

  2. 常见的CSS Hack

    原文地址: 小昱博客 - 常见的CSS Hack 转载请注明出处,谢谢! 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera ...

  3. css进阶之二:flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  4. CSS标签选择器(二)

    一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...

  5. java讲讲几种常见的排序算法(二)

    java讲讲几种常见的排序算法(二) 目录 java讲讲几种常见的排序算法(一) java讲讲几种常见的排序算法(二) 堆排序 思路:构建一个小顶堆,小顶堆就是棵二叉树,他的左右孩子均大于他的根节点( ...

  6. 常见的CSS样式

    常见的css样式 color 文字颜色 background-color 背景颜色 opacity 设置透明度 颜色: 光的三原色: 红 绿 蓝 三种颜色表示法: 名词表示法: red green b ...

  7. CSS :nth-of-type() bug

    CSS :nth-of-type() bug .tools-hover-box-list-item { pointer-events: auto; box-sizing: border-box; di ...

  8. taro css 转换 bug

    taro css 转换 bug https://nervjs.github.io/taro/docs/size.html https://nervjs.github.io/taro/docs/comp ...

  9. 关于IE6的一些常见的CSS BUG处理

    CSS BUG:样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS BUG: CSS Hack:css hack是指一种兼容css 在不同浏览器中正确显示的技巧方 ...

随机推荐

  1. Java基础05 实施接口

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在封装与接口中,private关键字封装了对象的内部成员.经过封装,产品隐藏了内部 ...

  2. Azure 云 Web 应用程序

    Azure 云 Web 应用程序 原文:Getting Started作者:Rick Anderson翻译:谢炀(Kiler)校对:孟帅洋(书缘).刘怡(AlexLEWIS).何镇汐 设置开发环境 安 ...

  3. jquery 中获取URL参数的方法

    今天写项目需要获取url后面的参数ref参数来判断是否开启计时器来刷新页面,之前一直都是用JS写的,今天在查资料的时候看到了一款JQ的插件 项目地址:https://github.com/allmar ...

  4. Delphi高仿Windows扫雷游戏(全部都是贴图绘制)

    http://www.newxing.com/Code/Delphi/game/543.html http://www.newxing.com/Code/Delphi/Network/1324.htm ...

  5. ssh登录的时候,根本不给输入密码的机会,直接拒绝,是因为BatchMode的设置

    BatchMode no“BatchMode”如果设为“yes”,passphrase/password(交互式输入口令)的提示将被禁止.当不能交互式输入口令的时候,这个选项对脚本文件和批处理任务十分 ...

  6. 基于visual Studio2013解决C语言竞赛题之1019填数

         题目 解决代码及点评 /* 19. 找3个数字,填在下面式子中,使等式成立. _6325 = 6325_ × ____ (等号左边是五位) 1,若答案有多个,则打印一组即 ...

  7. GitHub详解(转)

    GitHub 是一个共享虚拟主机服务,用于存放使用Git版本控制的软件代码和内容项目.它由GitHub公司(曾称Logical Awesome)的开发者Chris Wanstrath.PJ Hyett ...

  8. 基于visual Studio2013解决面试题之0603调整数组

     题目

  9. boost::asio async_write也不能保证一次发完所有数据 二

    只有看boost源码才能弄明白发生了什么.首先我是将vector里面写入了数据,然后用boost::asio::buffer将vector构造成了mutable_buffer_1对象. 参考该文档的重 ...

  10. Servlet的学习之Session(3)

    在上一篇<Servlet的学习之Session(2)>我们知道了Session能实现一个会话过程中保存数据或者多个会话中实现同一个Session的关键因素就是Cookie,只是Cookie ...