兼容

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;
    }
```
- IE6及更早浏览器浮动时产生双倍边距的BUG
  - 解决方案：针对ie6设置该标签的display属性为inline即可
  - ```
  #test {float:left;_display:inline;
  }
```
  - IE7及更早浏览器下子标签相对定位时父标签overflow属性的auto|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

<!--[if IE]><p>只在IE中能看到这个段落</p> <![endif]-->//只有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;
}//只有在IE6显示红色

* + html .box {background:red;
}//只有在IE7显示红色

web前端全栈0基础到精通（祺）09相关推荐

web前端全栈0基础到精通（祺）11
HTML5基础 HTML5中新增的布局标签 html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 (更加语义化) header标签 <hea ...
web前端全栈0基础到精通（祺）01
前端的概述 web的发展史 web1.0 简单的静态页面早期三大门户搜狐新浪网易 web2.0 更注重用户之间的交互用户即是信息的消费者也是制造者微博 web3.0 人工智能复杂的页面功 ...
web前端全栈0基础到精通（祺）vue 02
一.localStorage 和 sessionStorage的区别相同点: 都可以实现存储. 它们的大小都是5MB左右. 它们的存储方式都必须以字符串进行存储!!!! 它们的语法都是相同.存值: ...
web前端全栈0基础到精通（祺）08
表单表单标签注册和登录目的:收集用户信息,能够输入内容 input标签 text 文本输入类型 <input type="text" name="userna ...
web前端全栈0基础到精通（祺）js 02
数据类型分类. 基本数据类型: number string boolean null undefined 复杂/复合/引用数据类型: object array function 检验数据类型语法: ...
web前端全栈0基础到精通（祺）vue 01
一.vue的基本知识 1.1vue 的官网 https://cn.vuejs.org/ 1.2概念渐进式的JavaScript框架????渐进式... 自底向上,逐渐增强.vue.js它本身就是一个 ...
web前端全栈0基础到精通（祺）vue 04
一.组件(component) 在前端,两大概念一.模块模块指的就是逻辑封装,一些共通的功能,你把它提取出来,封装到js中.你需要这个功能,你就引入js es6的导入导出(导出的方式决定你引入的方 ...
web前端全栈0基础到精通（祺）07
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
web前端全栈0基础到精通（祺）03
盒模型基础选择器通配符选择器 * {width: 200px;height: 200px;background-color: yellow; } 标签选择器 div {width: 200px;h ...
web前端全栈0基础到精通（祺）js 10
表单快速获取表单元素 \1. 需要先获取表单 form \2. 快速获取表单元素 form.name值 var form = document.getElementsByTagName('form' ...

web前端全栈0基础到精通（祺）09

兼容

IE 浏览器常见兼容问题

CSS Hack

web前端全栈0基础到精通（祺）09相关推荐

最新文章

热门文章