1、z-index在position:relative/absolute等定位属性设置后还是无效,会导致top栏的导航栏目的子菜单被下面的层遮住,无法显示;
解决办法:?http://www.wufangbo.com/ie6-ie7-z-index-bug/
就是被子导航列表覆盖的层绝对不能设置为相对定位(在该层中想让其子元素设置为position:absolute;本层设置为position:relative;这样的组合在IE6中是绝对不允许的,解决办法是:去掉父层的position:relative;这个属性,修改其子元素定位为position:relative;即可,这样其父层就不会覆盖子导航列表了)
2、IE6对display:inline-block;属性支持的不全面,对内联元素支持的还可以,但对块状元素这样设置是无效的;
解决办法:
1、display:inline-block; _zoom:1;_display:inline;这样写才行。
2、将要弄成块状内联元素的div等标签换成内联元素span等,给span display:inline-block;就行了。
3、IE6对png24图片的透明度支持的不好,只对png8的图片才支持其透明度,但是png8的图片品质太低,如果是文本的话
会出现边框锯齿,使得文本图片变得很难看;
解决办法:
用带背景的jgp图片代替,背景要与所在容器的背景一致即可。
4、IE6不支持圆角,圆角要用图片来表现出来,写样式时很麻烦,注意这个问题。
5、IE6不支持box-shadow这个阴影属性,要做阴影效果必须用滤镜,写法是:
box-shadow: 0px 2px 2px #BEBEBE;//这是标准浏览器css3的写法,下面是针对IE6的滤镜写法
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color='#999999');
注意:color属性千万不能写成#999,一定要写全,否则会导致阴影跑到左上角去。
6、IE6中的select框的边框总是保留默认蓝色,无法去除,且其边框也不能简单的用border:0;或border:none;去除
解决办法是:
在select框外包含一层div,去除select边框即可,div的边框颜色是可以设置的。
具体解决代码是:
□、先给select加一个div父包含块,设置这个父包含块边框颜色为你想要的颜色,如:border: 1px solid #d0dad8;再加上overflow:hidden;属性;表示溢出部分隐藏,其作用原理是:让select偏移-1px的距离,一旦偏移就会触发overflow:hidden;属性,使得select边框被隐藏掉,解决了select边框无法被去除的问题;
□、接着,按照上面的原理,给select加上margin:-1px;属性,刷新,看到select边框被隐藏掉了,只剩下父层div的边框,看上去是那么回事了;
□、但是还有一个小尾巴,select默认的右边框还是蓝色的,且显示在没有溢出的div父层内,这时的解决办法是,增大select的宽度width为102%;表示比父层宽,原理也是宽出的部分会被隐藏掉,至此,就完成了兼容IE6以上的select边框的问题
□、最后,要注意的是别再表格单元格内使用以上效果,因为这么做会遮盖掉单元格td的右边框。
下面是网上摘录IE6的坑,尽可能往多的说:
border-style:dotted 点线 IE6不兼容 (除了solid以外,其它都有兼容问题,不完全一样)
a IE6 不支持a以外的所有标签伪类,IE6以上版本支持所有标签的hover伪类。
inline-block IE6 7不支持块元素标签的inline-block
空标签清浮动 IE6 最小高度 19px;这是font-size=0后,IE6下还有2px偏差。通过设置overflow:hidden来隐藏设置高度以外的高度。
after伪类 IE 6 7不支持after伪类清除浮动,通过zoom或是宽高解决
IE6 7下浮动元素的父级有宽度就不用清浮动了
zoom firefox不支持,zoom可以触发ie中的haslayout=true,当父元素没有宽高时,通过zoom和after伪类来兼容各个浏览器。
overflow IE6下不能包住浮动元素,也就是ie6下overflow 需要配合zoom:1
float IE 6 7中需要并在同一行的所有元素都要加浮动,在其它浏览器中
<div>
<divid=’div1’></div>
<divid=’div2’>文字</div>
</div>
div2可以不加浮动,div1加浮动就可以了。但是ie67中文字环绕会有间隙,所有需要在div2上加浮动。
IE6下的双边距bug 在ie6下块元素有float和左右的margin,那么左右的margin会被放大2倍。
IE67下li间隙问题 ie6 7中的li本身没有浮动,但是li中的内容有浮动,li的下边就会产生几像素的间隙。 解决办法:内容有浮动,那么给li也加浮动;给li加vertical-align:top或是其它属性值。
img{border:none;vertical-align:top;} /*解决a标签下img在ie6下会出现边框,解决图片下的空隙问题*/
opacity IE8及以下的浏览器用filter:alpha(opacity=0-100), 主流浏览器用opacity:0-1;
IE6 下的body 和html是没有高度的,所以需要加上 body,html{height:100%}
IEtester 是不支持滤镜的,ie浏览器是支持的。
position:fixed IE6不支持固定定位
position:relative
IE6下默认父级可以包住比自己大的子级(二者是没有定位的情况),而其他浏览器是包不住的,会产生溢出。解决办法overflow:hidden,但是
加了overflow:hidden;IE6的父级是包不住子级的相对定位。解决办法:给父级也加上定位(相对、绝对都可以)。
position:absolute IE6下绝对定位的父级宽高都为奇数时,那么元素的top 和bottom都会有1px的误差。
<label></label>
label标签在如下情况IE6没有效果
<label><inputtype=’radio’>单选按钮的内容</input></label&
gt;。一般情况下点击文字和按钮都可以选中,但是ie6下点击文字没有效果。解决办法:<input type=’radio’
id=’a’><label
for=’a’>单选按钮的内容</label></input>,将label中的文字和按钮相关联。
<form></form> IE6下form与form之间是有边距的,解决办法:样式重置。
input 设置宽高,在各个浏览器效果不一样。通常不设置。
select 只能设置宽,高存在兼容问题,IE6下设置高没有效果。
IE6下 子元素可以撑爆父元素设置好的宽度,主流浏览器不可以,解决办法:测量时注意,不要让子元素宽高大于父元素的宽高。
IE6 下元素浮动,其宽度需要内容撑开,若内容是块元素,ie6下宽度撑开整行。解决办法:给里面的块元素也加上浮动。
IE67下 块元素想要一样显示,必须都加float,若是采用margin会产生3px的间隙。
P tdp等标签不可以嵌套块标签
IE6下最小高度问题
当ie6下元素高度小于19px时,会默认设置成19px,最好解决办法:给元素加上overflow:hidden;将多余的隐藏掉。还有种办法就是设置元素的font-size:0;但是效果不好仍然会有2px的误差,不建议使用。
ie6下border 1px dotted点线是虚线,2px就不会出现这样的情况。解决办法:切背景平铺。
如何避免子元素外边距传递问题
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素添加overflow:hidden;样式即可(完美,ie6下要触发haslayout加上zoom:1;
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1pxsolid transparent可用),ie6下margin消失,需要触发haslayout 加上zoom:1;
5、为父元素或者子元素声明绝对定位
小结IE6的坑的更多相关文章
-
Java基础(10)——小结与填坑
前面都写了9篇啦,虽然断断续续发了半个月,写着写着会发现每篇中都有些比较重要的地方没有讲到~这篇还是需要填一填目前我已发现的坑了~ 一. 小结 Java编译命令 javac.运行命令java java ...
-
MySQL Connector/NET 使用小结(踩坑之路)
背景描述 根据项目的需要,需连接MySQL获取数据. 首先,先了解一下项目的情况: 之前的代码是C#编写的的, 运行时:.NETFramework3.5. 由于项目已经部署上线,因此不能升级运行时,这 ...
-
作业总结(一):IE6下面的那些坑
考完试就来实习的公司实习了,大概最近有两周时间就一直在做公司给新人布置的大作业.虽然只是很简单的一个小的项目,但却从其中总结到了不少有用的东西.计划将其发出来一系列文章,算是对这两周时间的总结.也算是 ...
-
(转)解决png图片在IE6下不透明的方法
来源于:http://xzl52199.blog.163.com/blog/static/95206446201142174540220/ 一.传统的JavaScript方法 思路: 1.一个专门解决 ...
-
支付宝使用流程和踩坑小记(附Demo)
# 支付宝使用整理 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym, ...
-
PHP 接入(第三方登录)QQ 登录 OAuth2.0 过程中遇到的坑
前言 绝大多数网站都集成了第三方登录,降低了注册门槛,增强了用户体验.最近看了看 QQ 互联上 QQ 登录的接口文档.接入 QQ 登录的一般流程是这样的:先申请开发者 -> 然后创建应用(拿到一 ...
-
从IE6到IE11上运行WebGL 3D遇到的各种坑
这篇<基于HTML5的电信网管3D机房监控应用>基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心,但有不少网友私信询问WebGL如何运行在老的IE678910浏览器 ...
-
win10+anaconda安装tensorflow和keras遇到的坑小结
win10下利用anaconda安装tensorflow和keras的教程都大同小异(针对CPU版本,我的gpu是1050TI的MAX-Q,不知为啥一直没安装成功),下面简单说下步骤. 一 Anaco ...
-
H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
-
unity的固定管线shader
最近shader学习中,看的视频. 练习的固定管线的shader如下: ps.在unity5中半透明不好用,其他的还好 //不区分大小写 //这是固定管线的Shader Shader "Sh ...
-
Jquery超简单遮罩层实现代码
看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: <style type="text/css"> .mask { pos ...
-
C#中的static、readonly与const的比较
C#中有两种常量类型,分别为readonly(运行时常量)与const(编译时常量),本文将就这两种类型的不同特性进行比较并说明各自的适用场景. 工作原理 readonly为运行时常量,程序运 ...
-
Chinese_PRC_CI_AS and SQL_Latin1_General_CP1_CI_AS类型错误
在编写存储过程时,经常会用到临时表,而且往往会使用临时表与正式表相关联. 当临时表与正式表关联的字段是字符类型的时候,因为临时表创建的字符类型会默认数据库的编码,而正式表的字符编码可能不同,那么这个时 ...
-
POJ2239_Selecting Courses(二分图最大匹配)
解题报告 http://blog.csdn.net/juncoder/article/details/38154699 题目传送门 题意: 每天有12节课.一周上7天,一门课在一周有多天上课. 求一周 ...
-
【CJOJ1372】【洛谷2730】【USACO 3.2.5】魔板
题面 Description 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 我们知道魔板的每一个方格都有一种颜色 ...
-
Android 超高仿微信图片选择器 图片该这么加载
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39943731,本文出自:[张鸿洋的博客] 1.概述 关于手机图片加载器,在当今像 ...
-
用Jedis调用Lua脚本来完成redis的数据操作
1.先完成一个简单的set/get操作 package com.example.HnadleTaskQueue; import redis.clients.jedis.Jedis; import ja ...
-
fiddler 手机 https 抓包 以及一些fiddler无法解决的https问题http2、tcp、udp、websocket证书写死在app中无法抓包
原文: https://blog.csdn.net/wangjun5159/article/details/52202059 fiddler手机抓包原理 fiddler手机抓包的原理与抓pc上的web ...
-
Ionic入门四:卡片
近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具. 针对移动端的应用,卡片会根据屏幕大小自适应大小. 我们可以很灵活的控制卡片的显示效果,甚至实现动画效果. 卡片一般放在页 ...