当前位置: 首页 > Web前端 > CSS

CSS在ie6上遇到的坑

时间:2023-03-31 12:20:56 CSS

div{width:100px;高度:100px;边框:aliceblue2px纯色;}.frist{背景色:红色!重要;背景颜色:蓝色;}.second{背景色:红色!重要;}.third{背景颜色:蓝色;}.second{背景颜色:蓝色;}CSS在ie6上遇到的坑前两天在做项目的时候,碰到一个很有意思的项目,需要兼容IE6。遇到了一些问题并解决了。写下来给大家,方便大家以后遇到类似的问题~如果能帮到你,点个赞吧?一、重要支撑不够好1.1为什么不够好?important在某些情况下,无法确定最终样式属性。1.2代码!代码!!我们通过控制颜色来说明这一切~div{width:100px;高度:100px;边框:aliceblue2px纯色;}.frist{背景色:红色!重要;背景颜色:蓝色;}.second{背景色:红色!重要;}.third{背景颜色:蓝色;}.second{背景颜色:蓝色;}/div>

1.3以上!上图!!Googleie61.4我们发现了什么?1、important在同一个css代码块中没有那么强大,会被后续样式覆盖;2.但是如果不是写在同一个css代码块里,你大爷终究是你大爷~3.所以我们可以利用这个漏洞,写出ie6专有风格(pseudo-hack)(慎用,是最好用ie6hack"_")2.margindouble问题2.1原因当float和margin同时设置时,会出现margindoubleTimes问题2.2代码代码!/**封装区域**/.area{width:200px;高度:200px;背景色:#00FFFF;}/**底部指示区域**/.footer{width:200px;高度:100px;kground-color:宝蓝色;}/**测试,边距块**/.testMargin{width:200px;高度:100px;向左飘浮;边距:50px;背景色:#0079CC;}/**50px指示器区域**/.checkLine{width:50px;向左飘浮;高度:100px;显示:内联块;背景色:#000;}/**100px指标区域**/.checkLine2{width:50px;高度:100px;显示:内联块;背景颜色:蓝绿色;}
2.3谷歌ie62.4看效果。如何解决?方案一:设置div显示:inline.testMargin{width:200px;高度:100px;向左飘浮;显示:内联;边距:50px;背景颜色:#0079CC;}方案二:写ie6的hack.testMargin{width:200px;高度:100px;向左飘浮;边距:50px;背景色:#0079CC;_margin:50px25px;}2.5解决方案3.ie6下图将有蓝灰色背景色3.1csscode.pngImg{border:#FF00001pxsolid;宽度:200px;高度:200px;}.jpgImg{border:black1pxsolid;宽度:200px;高度:200px;}.pngSpan{border:blue1pxsolid;显示:内联块;宽度:200px;高度:200px;背景:透明url(https://jhcan333.github.io/can-Share/image/ie6/404.png)无重复中心置顶;背景尺寸:封面;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://jhcan333.github.io/can-Share/image/ie6/404.png",sizingMethod='scale');/*IE6有效*/_background:none;/*IE6有效*/}.jpgSpan{border:brown1pxsolid;显示:内联块;宽度:200像素;高度:200px;背景:透明url(https://jhcan333.github.io/can-Share/image/ie6/404.jpg)无重复居中置顶;背景大小:包含;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://jhcan333.github.io/can-Share/image/ie6/404.jpg",sizingMethod='scale');/*IE6有效*/_background:none;/*IE6有效*/}3.2html标签3.3显示效果1.谷歌浏览器2.IE6浏览器3.4怎么做IE6不支持透明或半透明的png背景,所以img标签里的图片会有背景色,需要用cssfilter_filter的帮助:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://jhcan333.github.io/can-Share/image/404.png",sizingMethod='scale');/*IE6有效*/_背景:无;/*IE6有效*/这里先取消后台,再用cssfilter设置在属性前加上“_”下划线,表示只在ie6上使用。3.5现在有的封装好的方法将这个js引入到项目中在4.ie6下就可以了显示:inline-block异常问题4.1显示设置inlinehtml元素为inline后-block,会具备inline-block的特性;但是blockhtml元素设置为inline-block后,就不会排在同一行了;4.2上的代码.span-inline-block{background-color:#7FFFD4;显示:内联块;宽度:100px;高度:100px;边距:5px;}.div-inline-block{背景颜色:#00ff00;显示:内联块;宽度:100px;高度:100px;边距:5px;}4.3上图11.Google2.ie64.4怎么做?1.如果没有特殊要求,可以改div转span2,可以设置float属性,比如floattoright,效果如下5.ie6min-heightandmin-widthinvalid5.1代码.min-div-class{min-width:200px;min-height:200px;background-color:#00FF00;}5.2对比图1.谷歌2.ie6(是的,这是一张空白图片)5.3如何调整?直接设置宽度和高度。6.ie6下的select宁死也不跟╥﹏╥...硬软!?(;′Д`?)6.1什么?本来我把selectbox的样式调整得很漂亮。比如在ie6上结果就乱了。我没有写源代码。我刚写了demo6.2的demo!我的代码!!!.selectArea{位置:相对;宽度:100px;高度:24px;行高:20px;左填充:5px;边框:1px实心#0079cc;溢出:隐藏;}。testSelect{宽度:150px;行高:30px;边距:-3px0px;边框:0px实心透明;大纲:无;背景:无;外观:无;-moz-外观:无;-webkit-外观:无;}.dropdown{位置:绝对;右:5px;顶部:10px;}6.3各个浏览器显示googleie8ie66.4,有没有发现ie6下select不听话的?height~border~不好调~6.5怎么解决it?在Ie6上查看整洁就好,不需要花哨的东西~hashgo!(T_T).selectArea{position:relative;width:100px;height:24px;行高:20px;左填充:5px;边框:1pxsolid#0079cc;溢出:隐藏;_border:0px#fffsolid;_padding:0px;_overflow:auto;}.testSelect{width:150px;line-height:30px;3px0px;border:0pxsolidtransparent;outline:none;background:none;appearance:none;;right:5px;top:10px;_display:none;差不多就是这个效果~(原版的还是很工整的)ie6上的css问题先整理到这里,欢迎评论讨论备注:转载并注明出处,最近在搞一个前端程序员相关的宣传。除了技术分享,还增加了职业发展和生活记录的文章。欢迎大家关注,一起聊天吐槽,一起努力,认真生活!