当前位置： 首页 > 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问题先整理到这里，欢迎评论讨论备注：转载并注明出处，最近在搞一个前端程序员相关的宣传。除了技术分享，还增加了职业发展和生活记录的文章。欢迎大家关注，一起聊天吐槽，一起努力，认真生活！

CSS在ie6上遇到的坑相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。