解决ie6的浏览器css兼容问题

ie6上css碰到的坑

前两天在给一个项目做东西的时候，碰到一个有意思的项目，是需要兼容ie6，有一些碰到并且解决的问题，给大家写下来，方便大家以后碰到类似的问题哈～

能帮到你的话，点个赞呗？

1.important支持的不够好

1.1为什么说不够好？

important某些情况下不能决定最终的样式属性。

1.2代码！代码！！

我们通过对颜色的控制说明这一切~

1.3 上图！上图！！

谷歌	ie6
image	image

1.4我们发现了啥？

1.在同一个css代码块中的important没那么强力，会被后续的样式覆盖；
2.不过如果不再同一个css代码块中写的话，你大爷终究是你大爷～
3.所以我们可以利用这个漏洞，写ie6专有的样式了（伪hack）（慎用，不如用ie6的hack写法“_”）

2.margin双倍问题

2.1出现原因

当float和margin同时设置时，就会出现margin双倍的问题

2.2代码代码！

2.3来看看效果

谷歌	ie6
2.3.1.png
image

2.4.怎么解决？

方案1：

将div设置display：inline

.testMargin {
    width: 200px;
    height: 100px;
    float: left;
    display: inline;
    margin: 50px;
    background-color: #0079CC;
}

方案2：

编写ie6的hack

.testMargin {
    width:200px;
    height:100px;
    float:left;
    margin:50px;
    background-color:#0079CC;
    _margin: 50px 25px;
}

2.5解决结果

image

3.ie6下图片的会带有蓝灰色背景色

3.1 css代码

3.2 html标签

3.3展示效果

1.谷歌浏览器

image

2.IE6浏览器

image

3.4怎么搞

IE6不支持png背景透明或半透明，所以img标签中的图片会带有背景色，需要借助css滤镜来实现

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://jhcan333.github.io/can-Share/image/404.png",sizingMethod='scale');/*IE6有效*/
_background:none;/*IE6有效*/

在这里，首先把background取消，然后使用css滤镜来设置。其中属性前面添加”_”下划线，来表示，只在ie6上使用。

3.5现有的封装好的方法

将这个js引入项目就可以了

4.ie6下的display：inline-block异常问题

4.1表现

本是inline的html元素设置为inline-block后，会具有inline-block的特性；
但本是block的html元素设置为inline-block后，会出现不在同行排布的情况；

4.2上代码

4.3上图

1.谷歌

image

2.ie6

image

4.4怎么搞？

1.若无特殊要求，可以把div改为span
2.可以设置float属性。如float为right时，效果如下

image

5.ie6下min-height和min-width失效

5.1上代码

5.2上对比图

1.谷歌

image

2.ie6（没错，这是一张空白的图）

image

5.3 怎嘛整？

直接设置width、height。

6.ie6下的select宁死不从╥﹏╥...软硬不吃！ﾍ(;´Д｀ﾍ)

6.1what？

本来我把select框的样式给调的美美的，比如这样

image

结果在ie6上乱了套，源码我就不写了，直接写demo

6.2 demo!我的代码！！！

    
        1
        2
        3
    
    

6.3各个浏览器展示

谷歌	image
ie8	image
ie6	image

6.4有木有发现ie6下select不听话？

高度~边框 ~ 完全不好整 ~

6.5如何解决？

Ie6上看起来整齐就好了，不要什么花里胡哨的东西了~hash走起！ (T_T)

差不多是这个效果了吧~（原生的也还是很整齐的啊）

image

ie6上的css问题就先整理到这里了，欢迎大家评论讨论
备注：转载注明出处