IE 浏览器常见兼容问题

最新推荐文章于 2023-03-11 18:42:29 发布

初见766

最新推荐文章于 2023-03-11 18:42:29 发布

阅读量315

点赞数

分类专栏： html css 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_60488295/article/details/121653975

版权

html css 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

兼容

IE 浏览器常见兼容问题

兼容问题
- ie中图片边框问题
- 图片放在a标签中
- img {
  
  border:none
}
ie8以下浏览器中背景复合属性的写法问题
- .bg {
background:url("./images/bg.jpg")no-repeat center

}

解决方案：在url和no-repeat 直接加上空格

.bg {

background:url("./images/bg.jpg") no-repeat center

}

其他ie低版本兼容问题

在IE6及更早浏览器中定义小高度的容器
#test {

overflow:hidden;

height:1px;

font-size:0;

line-height:0;

}
IE7及更早浏览器下子标签相对定位时父标签overflow属性的hidden失效的问题
- 解决方案：给父标签也设置相对定位position:relative;

块转行内块 ie7 不在一行显示
- 解决方案：
- div {
  
  display:inline-block;
  
  *display:inline;
  
  *zoom:1;
}
ie7 及以下浏览器清浮动问题
/* : 单冒号兼容性更好，不推荐用双冒号 :: */

.clearfix:after {

content: '';

display: block;

clear: both;

}

/* 兼容 ie7 及以下浏览器清浮动问题 */

.clearfix {

*zoom: 1;

}

CSS Hack

条件Hack
- 大于：gt
- 大于或等于：gte
- 小于：lt
- 小于或等于：lte

 <title>Document</title>
 
    <!--[if IE]>
       <style>
         div 
         {
           width: 200px;
           height: 200px;
           border: 1px solid;
         }
          </style>
    
    <![endif]-->

 
</head>
<body>
  <div></div>

只有IE6以上，才能看到应用了test类的标签是红色文本

<!--[if gt IE 6]>

<style>

.test {

color:red;

}

</style>

<![endif]-->

IE10以上已经将条件注释移除，使用时要注意

属性级Hack
- - _ 下划线：选择IE6及以下
  - *：选择IE7及以下
  - \0：选择ie8以上
- color:red;//所有浏览器可识别
- _color:red;//仅IE6识别
- *color:red;//IE6、IE7识别
- color:red\0;//IE8、IE9识别
选择符级Hack
- *html .box { background:red; }//只有在IE7及以下显示红色

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局目的都是用来实现三栏布局，左右两栏固定宽，中间栏自适应的效果
实现思路：

设置 .left .center .right 三列

顺序：为了使主体内容优先加载，需要把.center放在最前面

圣杯布局

1.三个盒子，左侧固定，右侧固定，中间自适应100%，中间部分先解析,加浮动

2.左侧盒子设置margin-left:-100%;右侧盒子设置margin-left:-自身宽度;

3.给父标签加左右padding: 0 300px 0 200px;，再给左右侧盒子加相对定位。

缺点：当缩小到中间部分宽度小于左侧部分时候，布局会发生混乱

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .center {
      width: 100%;
      height: 400px;
      background-color: #009;
      float: left;
    }
    .left {
      width: 200px;
      height: 400px;
      background-color: #909;
      float: left;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right {
      width: 300px;
      height: 400px;
       background-color: #009009;
       float: left;
       margin-left: -300px;
       position: relative;
       left: 300px;
    }
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }
    .wrap {
      padding: 0 300px 0 200px;
    }
  </style>

</head>
<body>

  <div class="wrap clearfix">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>

</body>

双飞翼布局

1.三个盒子，左侧固定，右侧固定，中间自适应100%，中间先解析，加浮动

2.左侧设置margin-left:-100%;右侧设置margin-left:-自身宽度;

3. 给中间.center添加一层子元素 .inner给其添加外边距 margin:0 300px 0 200px;

缺点：相对于圣杯布局多嵌套一层标签

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .center {
      width: 100%;
      height: 400px;
      background-color: #090;
      float: left;
    }
    .left {
      width: 200px;
      height: 400px;
      background-color: #009;
      float: left;
      margin-left: -100%;
    }
    .right {
      width: 300px;
      height: 400px;
      background-color: #909;
      float: left;
      margin-left: -300px;
    }
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }
    .inner {
      margin: 0 300px 0 200px;
    }
  </style>
</head>
<body>
  <div class="wrap clearfix">
    <div class="center">
      <div class="inner">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

初见766

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE 浏览器常见兼容问题

兼容IE 浏览器常见兼容问题兼容问题 ie中图片边框问题图片放在a标签中 img { border:none } ie8以下浏览器中背景复合属性的写法问题 .bg { background:url("./images/bg.jpg")no-repeat center } 解决方案：在url和no-repeat 直接加上空格 .bg { background:url("./..
复制链接

扫一扫