CSS浏览器兼容问题总结
###前言
做过前端开发的几乎无一例外都被CSS在各个版本的不兼容坑过,还好有前辈大神们发明了各种各样的CSS hack语法来帮助我们解决这些问题。
现将这些CSS hack的用法总结一下。
###CSS hack 用法
####1、单个浏览器不兼容
#####1.1- IE5
在IE5上面,遇到的主要兼容问题就是DIV元素的居中问题,我们知道,在IE6及以上版本和其他现代浏览器中,支持的是xhtml标准,所以都可以用下面的方式实现DIV居中:
.demo {
width:80%;
magin:0 auto;
}
或者:
.demo {
position: relative;
magin:0 auto;
}
这两种方式都是利用了标准中默认情况下margin的auto属性会让元素左右边距相等的原理来实现。
但是,IE5采用的是html4.0的标准,并不支持这一特性,就会导致元素无法在页面中居中,但我们可以用一种更古老的方式去实现:
body {
text-align:center;
}
但是这样可能会有副作用,即页面中所有具有继承特性的元素中的文本就等默认为居中对齐了。好在现在IE6及IE5已经被淘汰很久了,我们在这里能够知悉其原理就可以了。
真有需要用到的话(赶紧换工作吧!),可以用以下方法(会同时改变IE6,然后再给IE6单独设置样式还原):
* html body{
text-align: center;
}
#####1.2- IE6
如果你的css在别的浏览器中都正常,只是在IE6下不正常,那么,就可以采用以下方法单独定义IE6下的样式而不会影响在其他浏览器下的呈现。
第一种:”-“前缀法
.demo {
-width:100px;
}
第二种:HTML注释法(写在HTML页面中,适合该样式只应用一个页面的情况)
<!--[if IE 6]>
<style>
.demo {
width:100px;
}
</style>
<![endif]-->
#####1.3- IE7(只有IE7识别)
*+html .demo {background: green;}
//或者:
*:first-child+html .demo {background: green;}
#####1.4 - firfox
@-moz-document url-prefix() {
.demo { color: red;
} }
#####1.5 - chrome (实际上是仅支持所有webkit内核浏览器)
@media screen and (-webkit-min-device-pixel-ratio:0) {
#test1{
color:red;
}
}
####2、两种浏览器不兼容
#####2.1-IE6/IE7:”*”前缀(标准模式下,如果是混杂模式,则所有IE都支持)
.demo {
*color: red;
}
#####2.2-IE7/IE8(selector { property/***/:value9;})
.demo {
color/***/:red9;
}
####3、三种及以上浏览器的兼容
#####3.1 除IE6以外的所有浏览器:
html>body .demo {
color: green;
}
//或者
.demo {
color/**/:red;
}
#####3.2 IE8-9,Firefox,Safari,Opear
html>/**/body .demo
{
background: red;
}
#####3.3 IE6/IE7/IE8/IE9
.demo {
color: red9;
}
3.4 IE9以上
:root .demo
{
color: red;
}
####4.CSS3支持
由于IE8以前的IE版本都不支持CSS3的新属性,虽然有个别属性利用IE的filter也可以勉强实现(例如background-size),但还是不尽如人意。所以要让IE8以前的IE版本支持CSS3新增属性,最好的方式是借助javascript,利用条件注释法来在页面载入时针对特定版本浏览器来实现想要的效果。
原文:大专栏 CSS浏览器兼容问题总结
原文地址:https://www.cnblogs.com/petewell/p/11607273.html
- 《Android插件化技术——原理篇》
- 利用Centos或RedHat的iso镜像搭建本地yum仓库
- QUIC协议初探-iOS实践
- Golang语言社区--【基础知识】常量
- 服务器日志备份超节省空间的思路
- 《企鹅电竞weex实践—— iOS SDK的小九九》
- Linux操作系统DNS解析(nameserver)监控脚本
- 不给“爸爸”添麻烦 - iTOP iOS 动态库改造
- 移动SEO分享:php自动提交复合型Sitemap到百度搜索
- 《Android外部存储》
- Android JNI出坑指南
- 《iPhone X ARKit Face Tracking》
- 结合标签广告,定制一个QQ邮箱订阅
- SecureCRT全局发送相同命令,快速抓取服务器信息的方法
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【STM32F407开发板用户手册】第31章 STM32F407的SPI总线基础知识和HAL库API
- 【工具使用】红队工具之Faction
- 【WebGL】一次drawcall中绘制多个不同纹理的图形
- BERT的PyTorch实现
- 从echarts-for-react源码中学习如何写单元测试
- 好用到飞起的12个jupyter lab插件
- Debug LinkedList
- Java对象公约
- 【Flutter 专题】96 图解 Draggable + DragTarget 基本拖拽效果
- Spring 基于注解(annotation)的配置之@Autowired注解
- 人心易变,这段有趣的C代码也一样!!!
- matplotlib绘制常见统计图形(一)
- python与安全(二)格式化字符串和Flask session
- ROS2机器人笔记20-07-24
- Postgresql 渗透利用总结