浏览器兼容、雪碧图及less技术

浏览器兼容性
1，<!DOCTYPE>技术
2，reset技术：normlizi技术
3，加前缀： -webkit- -o- -ms-
4，css hack技术
5，条件注释
6，导入包（导入插件）

 

 

解决浏览器兼容的方法：
1、opacity——falter（0~100）/
2、png背景——导包（插件）
3、圆角——导包图片
4、BFC——zoom1（无限制 在ie下触发bfc环境）
5、双倍margin兼容性问题
6、IE下3px差距（像素差距）
7、font-size设置为10px以下，然后查看审核元素（正常显示16px，火狐最小10px，一般的浏览器显示12px）

  

js中-用navigator 去判断浏览器版本

【haslyout】
不同的浏览器显示不同的内容
www.helv，org.com

软件：IEtester
使用方法新建IE个版本 一般选择IE6,IE7,IE8

\9 \0
hack技术

 

 

雪碧图技术sprate（精灵图）应用的是：背景定位和背景图片
雪碧图合并：compass（将页面上 来选取里面的某一张图）
充分利用定位方式来写
网站上用到的一些图片正合到一张单独的图片中，从而减少你的网站的http请求
数量该图片使用css background和
【图片雪碧图时，所有的图片宽高相同】
默认显示第一张图片，后面会循环显示

 

避开（关键字）less sass的名称
less是一种扩展技术，基于css来的， 变量 ，混合（也叫mixin），函数 ，运算， 简化了css 的代码，降低维护成本，必须用到解析器，目前用的是考拉 后缀名是.less的文件 ，必须通过解析器然后供页面使用
混合

变量：值可变
@nice-blue:#数字
@变量名-变量值（名称随便取，只要自己看得懂就可以）

 

1，新建文件夹；2建两个文件，分别是.html .less为后缀名的；3启动考拉；4，配置路径，+号打开文件夹；5，less里写文件，写一部分后考拉再刷新；6，生成用less命名的css 的文件 link只能引入css文件，les 也能引入css文件

混合mixin
针对.class id 元素选择器三种

带参数的混合：.名称（参数）（属性名：参数） backgroundUrl（@url）
给参数设默认值 border-radins:@length
不带参数属性值 .名称（）{声明}