首页 > 代码库 > 前端css兼容性与易混淆的点
前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden;}解读浮动闭合最佳方案：clearfix
二.唯一使用斜杠/分割的关键字
H2{ font:12px/100% sans-serif;}分割的分别是 字体大小 与 行高 ,其他关键是用空白符分割。
三.内联元素相连之间存在间隙
原因:内联元素是当做字体来处理的，字体之间是有间隔的
解决:
1.多个标签写在一行
2.将要闭合标签的地方与开始标签的地方重合
3.使用注释头尾相连
4.在父级上写：font-size:0;
5.使用display：block(img是内联元素)
6.使用letter-spacing属性
多个Img标签之间的间隙处理方法
四.布局
注意父元素的定位方式 是相对 还是静态 这决定了其内部绝对定位与浮动元素
五.块级元素包裹内联元素的时候，总会出现几像素的差
<!--例子1--><div><img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg"></div><!--例子2--><ul><li><img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg"></li></ul><!--例子3--><div><span>asdasdasd</span></div>解决：设置内联元素属性:display:block;
六.css hack(hack有风险,使用需谨慎)
1.html hack
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]--><!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]--><!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]--><!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->在css中使用:
.ie6 body{ background-color:red;}
2.选择器 hack
* html .test{color:#090;} /* For IE6 */* + html .test{color:#ff0;} /* For IE7 */
3.属性hack
color:#fff\0; /*：选择IE8+和Opera*/color:#090\9; /* For IE浏览器 */*color:#f00; /* For IE7 */_color:#ff0; /* For IE6 */
七.box-sizing
1.常规的盒模型: box-sizing : content-box(width == content 不包括padiing border)
2.box-sizing : border-box width == content + padiing + border(相当于低级浏览器的怪异模式)
八.图片格式区别
格式 区别
jpg 有损压缩
png 无损压缩,透明图
gif 动态图像
webp 支持有损压缩和无损压缩的图片文件,压缩率极高,且画面丰富(有浏览器兼容性问题)
九.px,em,rem的区别
em,rem 相对大小
em相对父元素font-size
rem相对html根元素的font-size
px 绝对大小
十.不能继承的属性
多数边框类属性:如边框，补白，背景等。
十一.css中选择器的权重
依次变小:id>class>标签
十二.css颜色的问题
尽量使用16进制的颜色，类似#fff;一位内16进制的颜色是确定的一个色值。
而red这类的颜色值不是确定的，可能会受到用户代理即user agent stylesheet的影响。
十三.ie6.7不支持box-sizing: border-box;
解决:使用https://github.com/Schepp/box-sizing-polyfill这个垫片
注意：*behavior: url(../resource/js/lab/boxsizing.htc);这个URL是相对于HTML页面的！！
十四.IE6.7 font与font-family
font起作用了 但是微软雅黑不起作用
解决:必须要设置font-family:"microsoft yahei"
十五.text-align text-indent vertical-align
1.text-align:作用于块级元素
如果要使得img居中，使用text-align是不行的，因为img不是块状元素。只需要在img外面套一层div即可。
<div style="text-align:center"> <img src="XXX.jpg"/></div>
2.text-indent:作用于块级元素
3.vertical-align:作用于行内元素,基于baseline的位置调整
十六.ul中li下面的间隔线用li布局边框问题
在IE低版本下有bug，会多出li的宽高
间隔线使用li的border去做
十七.ie8及一下的浏览器不支持:befor.:after
使用jquery的一个库：jquery.pseudo.js 做兼容 兼容低版本浏览器的时候
注意:不要使用太高的JQuery版本,会报错！(我用的是1.10)
十八.IE6不支持position:fixed
.leftTop{ position:absolute; left:expression(eval(document.documentElement.scrollLeft)); top:expression(eval(document.documentElement.scrollTop));}position:fixed; 闪动问题
解决: *html{ background-image:url(about:blank); background-attachment:fixed;
十九.IE6双倍margin,padding边距的问题
一旦元素浮动，就会出现双倍的bug
解决：display:inline
二十.IE6中设置宽高位10px的时候出现的是长方形
这个现象的另一种情况是:在IE6中定义比较小的高度问题。
原因:IE6有默认行高
解决：使用font-size:0;line-height:0;
二十一.IE6无法识别伪对象:first-letter/:first-line
p:first-letter {}解决;在first-letter与"{"间增加空格
二十二.IE6下忽略!important
div{color:#f00!important;color:#000;}解决:分开写，并且将!important的属性且在前面
div{color:#f00!important;}div{color:#000;}
不定期更新。。。
前端css兼容性与易混淆的点