小结IE6的坑

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的右边框。

时间: 2024-08-08 13:59:19

小结IE6的坑的相关文章

element-ui Form表单校验小结及踩坑

1.要验证输入只能为数字时 . 如果使用type=“number”样式这边去掉type=number时自带的属性 /* 去除webkit中input的type="number"时出现的上下图标 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance

作业总结(一):IE6下面的那些坑

考完试就来实习的公司实习了,大概最近有两周时间就一直在做公司给新人布置的大作业.虽然只是很简单的一个小的项目,但却从其中总结到了不少有用的东西.计划将其发出来一系列文章,算是对这两周时间的总结.也算是在这里留下记录,防止以后坑在同一个地方,接下来几周没事持续填坑吧. 在没来公司之前,我做过的项目也好,学习的新技术也好.从来都没有去想过去兼容IE6及以下版本的浏览器的,之前一段时间淘宝刚宣布不再继续支持IE6,刚好我做大作业的时候,百度也宣布不再继续支持IE6.但是来了公司之后接到的新人大作业之后

解决IE6背景图片有灰白背景的情况 转

前言:IE6不支持png背景透明或半透明.其解决方法有IE滤镜,纯粹的JavaScript,以及jQuery等,正所谓事非经过不知难,让png图片在IE6下背景透明显示只是第一步,如果对这些png图片做进一步的操作,往往会出现各类莫名的问题.而本篇文章讲详尽阐述png背景透明会出现哪些问题,一些自己的经验之谈和一些相关的拓展.内容较多,有一定的深度和广度,希望对大家有帮助. 一.可解决的方法 1. IE css 滤镜IE css滤镜中有一个使png背景透明的滤镜,JavaScript方法也是应用

我的支付总结(三) 常见问题

.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .container::before,.container::after { content: " "; display: table } .container::after { clear: both } .container::before,.container::after { content:

各种友(e)善(xin)数论总集(未完待续),从入门到绝望

目录 快速幂 扩展欧几里得 GCD 扩展欧几里得 同余系列 同余方程 同余方程组 一点想法 高次同余方程 BSGS exBSGS 线性筛素数 埃式筛 欧拉筛 欧拉函数 讲解 两道水题 法雷级数 可见点数 原根 欧拉定理 原根部分性质证明(数量证不出来,一个还没填的坑) 扩展:原根的求法 代码 高斯消元 普通 辗转相除法 矩阵树与证明 未了结的坑 无向图 关联矩阵 Kirchhoff矩阵 行列式 求法 代码 证明 柯西-比内公式 小结 @ 快速幂 题目描述 [题意] 求a^b mod c,a,b,

项目小结一:在项目中使用 IScroll 所碰到的那些坑

最近做了个 WEB APP 项目,用到了大名鼎鼎的 IScroll,滚动的效果的确很赞,但是坑也是特别多,下面总结一下,希望自后来者有帮助. 该项目现已开源在 github 上,https://github.com/ansiboy/ChiTuStore 一. 使用 abstract 定位 顶栏和底栏最好不要使用 fixed 定位,应该使用 abstract 定位.我最初使用的是 fixed 定位,页面从右往左呈现的时候,经常会出现两个问题:1.顶栏时不时地会消失掉,2.新页面在移动的过程中,顶栏

ASP.NET MVC升级到ASP.NET Core MVC踩坑小结

原文:ASP.NET MVC升级到ASP.NET Core MVC踩坑小结 写在前面 ASP.NET Core是微软新推出的支持跨平台.高性能.开源的开发框架,它的优势不必多说,因为已经说得太多了.当然,现在依然有着数量庞大的系统运行于.NET Framework上,由于有大量的Break Changes,很多项目项目团队也不敢贸然升级,其中的考量也不全部是技术原因,更多的可能还是业务推进因素. 小编自年前开始考虑升级一套电商系统,原先是基于.NET Framework 4.5的,打算直接升级到

2017-6-14 踩坑小结(Android文件读写 相关问题)

填坑 getSlotFromBufferLocked: unknown buffer: 0xab7115e0 1. 在棉花糖(6.0)上莫名出现 未知缓冲 错误,百度了一下,貌似这个是Android6.0的bug??,所以白忙活,这个坑 填不上了,等Google自己填吧 2. 在使用Android Device Monitor工具时,提示:Could not open Selected VM debug port (8700),我擦?? 这TM又是什么鬼,紧接着笔者又是一番 翻资料,原来是端口被

CSS hacker使用小结(兼容IE6、7、8)

什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果.这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack! CSS hack的原理 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS