ie低版本兼容问题及解决方法，cssHack技术

最新推荐文章于 2023-06-29 22:05:18 发布

啊作

最新推荐文章于 2023-06-29 22:05:18 发布

阅读量388

点赞数 1

分类专栏：初学前端文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_43213962/article/details/105982697

版权

初学前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

IE低版本兼容问题及解决方法

常见的问题：

1，给图片加a链接，在ie中显示多了蓝色边框。

解决：
给图片设置border:none;/border:0;

2，ie8以下背景属性图片后面的no-repeat没有加空格隔开的话,在ie识别不了。

background: url("https://img-bss.csdn.net/1587972968712.jpg")no-repeat;

* no-repeat紧接

ie中识别不了，无法显示。

解决：
加空格，跟路径隔开。

3，在ie7 以下，转行内不会在一行显示，失效。（给两个相邻盒子转行内块，失效）

解决：给盒子添加
*display:inline;
*zoom:1;

4，ie6中盒子浮动，给盒子加上左外边距，第一个盒子的左边距变成双倍边距。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>

在ie6及以下打开：
在这里插入图片描述

解决：给盒子加上
_display:inline;
_只能在ie6识别。

5，在ie 6及以下版本设置height:1px;会出现比较大的高度。

            height: 1px;
            background-color: red;

在这里插入图片描述

解决：给盒子设置
overflow:hidden;
font-size:0;
line-height:0;

6，在ie7及一下，在定位中，父元素用overflow隐藏失效。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 300px;
            height: 300px;
            background-color: blue;
            overflow: hidden;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            right: -280px;
        }
    </style>
</head>
<body>
      <div class="wrap">
          <div class="box"></div>
      </div>
</body>

在这里插入图片描述

解决：
给父元素加position:relative;

7，ie7及以下浏览器，li中出现两个及以上子元素浮动时，li之间出现空白问题。

解决方法：给li添加vertical-align:top;

    li{
        vertical-align:top;
    }

针对兼容，还有使用cssHack技术

css Hack是通过一些特殊方式去处理不同浏览器之间的兼容问题,某些情况使用css Hack处理兼容能事半功倍。滥用css Hack会影响页面性能，并且维护困难，所以应当避免大量使用css Hack技术。

1，条件Hack， ie从10及以上的版本都不支持条件hack，所以以下代码在ie9以下才会显示

语法：

<!--[if ie]>  
/* 里面是内容区域 */
注意标签不要有空格，不然识别不了
<![endif]-->

还有条件：

        gt 大于
        
        gte大于等于

        lt小于

        lte小于等于

        !  除了


<!--[if ie]>  
    <p class="pass">我这个p这有ie能看到</p> 
<![endif]-->


<!--[if gt ie 6]>  
    <p>我这个p这有大于ie6才能看到</p> 
<![endif]-->


<!--[if gte ie 6]>  
    <p>我这个p这有大于或者等于ie6才能看到</p> 
<![endif]-->


<!--[if ! ie 7]>  
    <p>我这个p除了ie7，都能看到</p> 
<![endif]-->

2，属性级hack（属性级hack就是给css属性添加特殊符号来处理不同版本浏览器的兼容）

_:ie6及以下版本浏览器识别

*:ie7及以下版本浏览器识别

属性前面（前缀）添加这些特殊符号



\0:ie8及以上版本的浏览器识别
属性 值（样式） 后面（后缀）添加特殊符号


.box{

    _background:red;
    *background:green;
    background:yellow\0;
    
}

3，选择符级hack
*html 选择ie6及以下浏览器识别

  .box{
        width: 100px;
        height: 100px;
        background: red;
    }
        *html .box{
            background: yellow;
     }

*+html 选择ie7浏览器识别

 .box1{
        width: 100px;
        height: 100px;
        background: green;
     }
       *+html .box1{
            background: blue;
       }

好了，今天就到这了。奥利给一下

啊作

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ie低版本兼容问题及解决方法，cssHack技术

IE低版本兼容问题及解决方法常见的问题：1，给图片加a链接，在ie中显示多了蓝色边框。解决：给图片设置border:none;/border:0;2，ie8以下背景属性图片后面的no-repeat没有加空格隔开的话,在ie识别不了。background: url("https://img-bss.csdn.net/1587972968712.jpg")no-repeat;...
复制链接

扫一扫