css 选择器兼容性,css选择器与属性的兼容性问题

选择器兼容问题：

1.css2选择器兼容问题主要出现在IE6-7

IE6不支持多个类直接组合

如：div.a.b会被当成div.b

解决办法：处理好选择器优先级

IE6不支持直接子元素，兄弟选择器

如E>F(直接子元素选择器)，E~F(相邻兄弟选择器)，E+F(兄弟选择器)选择器无效

解决办法：避免使用或换后代选择器

IE6不支持属性选择器

解决办法：添加class

IE6非链接不支持:hover，:active等伪类选择器

解决办法：用a标签嵌套需要hover的元素

IE6不支持:first-child选择器

解决办法：添加class

IE6，7不支持伪元素选择器

解决办法：添加html

IE6，7不支持:focus伪类

解决办法：JavaScript解决，添加focus事件

2.css3选择器兼容问题

css3大部分选择器兼容性是IE9+，移动端支持绝大多数css3选择器

3.css2属性兼容问题

主要集中在IE6上，IE7上一小部分属性不支持

IE6不支持min/max-width/height

min-height解决办法:

selector{

min-height:500px;

_height:500px;

}

min-width解决办法：

.container{

min-width:500px;

}

.container .keke{

height:1px;

width:500px;

}

max-width/height解决办法：

使用javascript解决

IE6不支持position:fixed

解决办法：

html,body{

height:100%;

}

.keke{

position:fixed;

_position:absolute;

right:0;

bottom;0;

}

此方法副作用：其它相对于body进行绝对定位的元素也会受到影响

IE6，7不支持display:inline-block

原本是行级元素支持display:inline-block；而原本是块级元素不支持

解决办法：

selector{

display:inline-block;

*display:inline;

*zoom:1

}

IE6，7不支持display:table

解决办法：

使用float或inline-block进行布局。

4.css3属性兼容问题

IE6，7不支持，IE8部分支持(box-sizing和outline是支持的)，IE9基本支持

IE8及以下还是使用固定宽度布局

IE9不支持transition和animation

解决办法：JavaScript解决

浏览器厂商为了实验一些特性要加前缀

Chrome/Safari/Opera:-webkit-

Miscsoft:-ms-

Mozilla:-moz-

autoprefixer工具，自动添加前缀

css 选择器兼容性,css选择器与属性的兼容性问题相关推荐

前端之CSS篇(二)——CSS复合选择器及元素的显示模式和背景属性
1.Emmet语法 Emmet语法是前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法. 1.1快速生成HTML结构语法 (1)生成标签直接输入 ...
HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...
css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head>/* *通配符选择器匹配任何元素 */*{margin: 0;padding: 0;} </head> css样式有三种一种是内嵌 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
css定位-css新增选择器（内减，属性，伪类，2d变换，过渡）
目录一.定位(重点) 1.静态定位 2.相对定位 3.绝对定位 4.固定定位 5.定位元素的层叠效果二.css3和css2的区别 1.内减模式 2.新增属性选择器 3.新增伪类选择器 4. 2d变 ...
CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置
目录一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
css字体样式，选择器，外观属性
css字体样式,选择器,外观属性字体样式 ont-size:字号大小 font-family:字体 css unicode 字体 font-weight:字体粗细 font-style:字体风格 f ...

css 选择器兼容性,css选择器与属性的兼容性问题

css 选择器兼容性,css选择器与属性的兼容性问题相关推荐

最新文章

热门文章

css 选择器 兼容性,css选择器与属性的兼容性问题

css 选择器 兼容性,css选择器与属性的兼容性问题相关推荐

最新文章

热门文章

css 选择器兼容性,css选择器与属性的兼容性问题

css 选择器兼容性,css选择器与属性的兼容性问题相关推荐