IE常见的CSS的BUG(二)
之前介绍过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(二)的更多相关文章
- IE常见的CSS的BUG(一)
2011年6月,我毕业了.2012年我接触了CSS,本以为会好过些能赚点钱了,可谁知,Internet Explorer(下称IE),这个前端工程师的噩梦浏览器让我不再那么好过了.各种出现在IE身上的 ...
- 常见的CSS Hack
原文地址: 小昱博客 - 常见的CSS Hack 转载请注明出处,谢谢! 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- CSS标签选择器(二)
一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...
- java讲讲几种常见的排序算法(二)
java讲讲几种常见的排序算法(二) 目录 java讲讲几种常见的排序算法(一) java讲讲几种常见的排序算法(二) 堆排序 思路:构建一个小顶堆,小顶堆就是棵二叉树,他的左右孩子均大于他的根节点( ...
- 常见的CSS样式
常见的css样式 color 文字颜色 background-color 背景颜色 opacity 设置透明度 颜色: 光的三原色: 红 绿 蓝 三种颜色表示法: 名词表示法: red green b ...
- CSS :nth-of-type() bug
CSS :nth-of-type() bug .tools-hover-box-list-item { pointer-events: auto; box-sizing: border-box; di ...
- taro css 转换 bug
taro css 转换 bug https://nervjs.github.io/taro/docs/size.html https://nervjs.github.io/taro/docs/comp ...
- 关于IE6的一些常见的CSS BUG处理
CSS BUG:样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS BUG: CSS Hack:css hack是指一种兼容css 在不同浏览器中正确显示的技巧方 ...
随机推荐
- Java基础05 实施接口
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在封装与接口中,private关键字封装了对象的内部成员.经过封装,产品隐藏了内部 ...
- Azure 云 Web 应用程序
Azure 云 Web 应用程序 原文:Getting Started作者:Rick Anderson翻译:谢炀(Kiler)校对:孟帅洋(书缘).刘怡(AlexLEWIS).何镇汐 设置开发环境 安 ...
- jquery 中获取URL参数的方法
今天写项目需要获取url后面的参数ref参数来判断是否开启计时器来刷新页面,之前一直都是用JS写的,今天在查资料的时候看到了一款JQ的插件 项目地址:https://github.com/allmar ...
- Delphi高仿Windows扫雷游戏(全部都是贴图绘制)
http://www.newxing.com/Code/Delphi/game/543.html http://www.newxing.com/Code/Delphi/Network/1324.htm ...
- ssh登录的时候,根本不给输入密码的机会,直接拒绝,是因为BatchMode的设置
BatchMode no“BatchMode”如果设为“yes”,passphrase/password(交互式输入口令)的提示将被禁止.当不能交互式输入口令的时候,这个选项对脚本文件和批处理任务十分 ...
- 基于visual Studio2013解决C语言竞赛题之1019填数
题目 解决代码及点评 /* 19. 找3个数字,填在下面式子中,使等式成立. _6325 = 6325_ × ____ (等号左边是五位) 1,若答案有多个,则打印一组即 ...
- GitHub详解(转)
GitHub 是一个共享虚拟主机服务,用于存放使用Git版本控制的软件代码和内容项目.它由GitHub公司(曾称Logical Awesome)的开发者Chris Wanstrath.PJ Hyett ...
- 基于visual Studio2013解决面试题之0603调整数组
题目
- boost::asio async_write也不能保证一次发完所有数据 二
只有看boost源码才能弄明白发生了什么.首先我是将vector里面写入了数据,然后用boost::asio::buffer将vector构造成了mutable_buffer_1对象. 参考该文档的重 ...
- Servlet的学习之Session(3)
在上一篇<Servlet的学习之Session(2)>我们知道了Session能实现一个会话过程中保存数据或者多个会话中实现同一个Session的关键因素就是Cookie,只是Cookie ...