ie浏览器样式兼容写法_IE浏览器兼容问题-----html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫。此时我们要用到hack。
HACK就是针对不同的浏览器写不同的HTML、CSS样式,从而使各种浏览器达到一致的渲染效果。
下面我们就分别了解一下HTML的hack和CSS的hack。
(一)、HTML的hack
HTML的hack由注释演变而来,在高级浏览器中注释不会被加载,把IE浏览器的兼容代码写在注释中,IE浏览器会识别。
HTML的hack代码模板:
注:
①用于写兼容的注释,标签内首位都要加!感叹号。
②单词都写在一对中括号中
③IE和版本号之间要加空格
④不加比较单词,表示只兼容这一个版本;
比较单词:lt=less than(小于)、lte=less than or equal (小于等于)、gt=great than(大于)、gte=great than or equal(大于等于)
只要记住这一个模板就知道HTML的兼容怎么写了,下面我们列举几个:
单独写给IE6的解决兼容问题的HTML代码:
(二)、CSS的hack
CSS的hack包括:属性的hack和选择器的hack
设置css的hack要注意的是css样式的层叠性,给同一个元素设置的兼容写法必须写在后面,否则会被层叠掉。
(1)属性的hack
①只兼容IE6的hack
hack符:-或_,当做前缀写在属性前面,中间不加空格
在属性名前面加短横-或者下划线_(原理:高级浏览器及其他浏览器会认为这个前缀符号是一个unknown property name),未知的属性名,不会报错,不予加载。
例:
background:red; //高级浏览器识别
_background:pink; //仅IE6识别
②兼容IE6、7的hack
hack符: ` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 中的任一字符,作为前缀写在属性前面
例:
background:red; //高级浏览器识别
!background:pink; //仅IE6、7识别
③只兼容IE8的hack
hack符:\0/,必须写在属性值与分号之间,中间不加空格
background:red; //高级浏览器识别
background:pink\0/; //仅IE8识别
④兼容IE8、9、10的hack
hack符:\0,必须写在属性值与分号之间,中间不加空格
background:red; //高级浏览器识别
background:pink\0; //IE8、9、10识别
⑤兼容IE6、7、8、9、10
hack符:\9,必须写在属性值与分号之间,中间不加空格
(2)选择器的hack
给选择器添加hack,这个选择器中的样式都是IE兼容样式,其他高级浏览器不识别,同理给同一个选择器设置的兼容样式要写在高级浏览器可识别的常规样式后面,否则会被层叠
①IE6及以下版本的hack
hack符:* html,*和html之间有空格,再加一个空格,后面写选择器
例:
.box{
width: 200px;
height: 200px;
border-radius: 50%;
background: yellowgreen;
}
* html .box{
width: 100px;
height: 100px;
background: skyblue;
}
②IE7及以下版本的hack
hack符:,英文逗号,写在选择器后面,不加空格
例:
.box,{
background: #999;
border: 10px solid red;
③兼容IE6以外的其他版本的hack
hack符:html>body,写在选择器前面,与选择器之间有一个空格隔开
例:
html>body .box{
background: yellow;
}
④兼容IE6、7以外的版本的hack
hack符:html>/**/或html~/**/,写在选择器前面,与选择器之间有一个空格隔开
例:
html>/**/body .box{
background: purple;
ie浏览器样式兼容写法_IE浏览器兼容问题-----html和css的兼容写法相关推荐
- ie浏览器打不开闪退_ie浏览器点开闪退_ie浏览器打不开?就是闪退.别的可以_ie浏览器打不开闪退...
网友求助:ie浏览器点开闪退_ie浏览器打不开?就是闪退.别的可以_ie浏览器打不开闪退 问题 最佳答案 推荐答案 前言你好,看到你提出的问题后,你提出的问题是浏览器设置出现的问题.解决方法如下:打开 ...
- ie浏览器网页版进入_IE浏览器打开网页提示无法打开Internet站点的解决办法
IE浏览器打开网页时提示Internet explorer无法打开站点,这是什么问题?Internet explorer打不开网页提示无法打开站点怎么办?请看下文五种解决办法. 方法一:管理加载项 打 ...
- ie浏览器网页版进入_IE浏览器打开网页速度很慢的解决办法
IE浏览器网页打开速度很慢怎么办?最近有用户反映,使用IE浏览器上网时,打开网页非常慢,如何解决这个问题?请看下文. 解决办法: 1.登录到系统桌面,使用组合快捷键win键+r键打开运行窗口,在打开的 ...
- X-UA-Compatible 解决IE浏览器样式不兼容问题
X-UA-Compatible 解决IE浏览器样式不兼容问题 参考文章: (1)X-UA-Compatible 解决IE浏览器样式不兼容问题 (2)https://www.cnblogs.com/51 ...
- html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总,常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾 本文主要介绍JS的跨浏览器兼容性 ...
- 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录 一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法 和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
- html不兼容的原因,浏览器不兼容的原因和解决方法
浏览器之间不兼容的原因和解决方案网页设计中最大的麻烦之一是网页与不同浏览器的兼容性,这是因为主流浏览器(例如IE 6.0 / IE 7.0 / firefox 2 / Opera 9)无法进行CSS解 ...
- 调用浏览器局部打印,空白、只有一页问题、火狐兼容
调用浏览器局部打印,空白.只有一页问题.火狐兼容 项目中需要局部打印页面的图表,图表类型多而杂,因此html结构中包含了canvas和iframe,iframe中又包含canvas. 刚开始根据网上的 ...
- ie浏览器、低版本火狐浏览器兼容问题汇总
一.兼容es6语法 1.安装babel-polyfill npm install babel-polyfill 2.在src/main.js最上面第一行代码引入 import 'babel-polyf ...
最新文章
- MSSQL 2008里事务的一个问题
- 中国联轴器行业发展态势分析及十四五规划建议报告2021-2027年
- Android开源介绍-UI组件
- swift textView字数限制,textView点击完成隐藏键盘
- JUnit中测试异常抛出的方法
- flex item的width VS flex-basis
- mysql编译安装root密码_MySQL 5.7.11编译安装以及修改root密码小结
- python 时间模块 time datetime calendar
- 【AtCoder010】A - Addition(奇偶)
- [HNOI2005][BZOJ1202] 狡猾的商人
- 关于BOM的一些基本知识以及表格的操作
- 深入了解 Squid 代理服务器及应用
- 工作中PUSH用到的统计命令
- xcode5 自定义模板
- 净化自己的内心,扫除内心的尘埃
- HTTPS 中双向认证SSL 协议的具体过程
- JS中使用bignumber处理高精度小数 失去去精确度运算 bigNumber用法
- Google的地理信息反向编码结果中的字段说明
- python计算移动平均线_(转)简单移动平均线(Simple Moving Average,SMA) 定义及使用...
- 天涯网站跨站漏洞(ALLyeSNO)
热门文章
- 柔和渐变UI素材,让设计更加柔和的法宝。
- mysql 5.7 源码编译安装_mysql-5.7.*源码编译安装
- mysql查询今日没有时间字段_关于日期及时间字段的查询
- 决策树 随机森林 xgboost_推荐收藏 | 决策树、随机森林、bagging、boosting、Adaboost、GBDT、XGBoost总结...
- C++ 运算符重载的原理
- Python3爬取豆瓣图书Top250并写入txt文件当中
- QTableWidget插入项item方法 及误区
- MyBatis的优化
- Ubuntu16.04 配置VNC
- CoreOS ignition简介