设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 705|回复: 0

[其他] 前端的一些内容及各大浏览器的兼容性

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-8-26 11:30:03 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
前端的一些内容及各大浏览器的兼容性
默认样式重置(css reset)    css reset
原则:但凡是浏览器的样式,都不要使用


body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0}

ol,ul{list-style:none,padding:0;margin:0}

a{text-decoration:none;}

img{border:none;}



a伪类的先后顺序 link、visited、hover、active



块元素和内嵌元素

         块元素的特征

1.     默认读占一行

2.     没有宽度时,默认撑满一排

3.     支持所有css命令



内嵌(内嵌、行内)的特征

1.     同排可以继续跟同类的标签

2.     内容撑开宽高

3.     不支持上下的margin和padding

4.     代码换行被解析



inline-block的特点和问题

         特性:

1.     块在一行显示

2.     行内属性标签支持宽高

3.     没有宽高的时候内容撑开宽度

问题:

1.     代码换行被解析

2.     ie6、ie7不支持快属性标签的inline-block;



前端规范:

1.     所有书写均在英文半角状态下的小写

2.     id,class必须以字母开头

3.     所有标签必须闭合

4.     html标签用tab键缩进

5.     <!--  html注释 -->

6.     /*      css注释  */

7.     ul,li/ol,li/dl,dt,dd拥有父子关系的标签

8.     p,dt,h标签里面不能嵌套快属性标签

9.     a标签不能嵌套a

10.  内联元素不能嵌套块





float浮动:

1.     块元素

2.     内容撑开宽高

3.     脱离文档流 (文档流是文档中可以显示对象在排列时所占用的位置)

4.     提升层级半层



清除浮动的方法及问题

1.     加高度     (扩展性不好)

2.     给父级加浮动         (页面中所有元素都加浮动,margin左右自动失效(floatsbad!))

3.     加inline-block          (margin左右自动失效)

4.     空标签清除浮动     (ie6最小高度19px;(解决ie6下还有2px偏差))

5.     br清除浮动              (不符合工作中的结构、样式、行为三者分离的要求)

6.     after伪类清除浮动                 (现在主流)

.clear:after{content:’’;display:block;clear:both;}

.cler{zoom:1}

after伪类:元素内部末尾添加内容

  :after{content:”添加的内容”;}ie6,ie7下不兼容

zoom缩放

a.     触发ie下haslayout,使元素根据自身内容计算快高

b.     ff不支持

7.ovrflow:hidden清除浮动方法           (需要配合宽高或者zoom兼容ie6 ie7)

         overflow:scroll || auto || hidden;

         overflow:hidden;溢出隐藏(裁刀)



浮动兼容性问题

         ie6双倍边距bug(ie6下块属性标签浮动,并且有横向margin,横向margin加倍)

a.     ie6

b.     浮动

c.     横向margin

d.     块属性标签(加display:inline)



ie6下 li部分兼容性问题:

a.     左右两列布局,右边右浮动ie6ie7下拆行;(左边元素浮动)

b.     ie6 ie7 li下元素都有浮动,在ie6ie7下方会产生4px间隙的问题;(加vertical-align:top;)



图片下方间隙问题

a.     display;(改变标签本身特性)

b.     overflow:hiden;(必须知道图片高度)

c.     vertical-align(暂时最完美的方案)





css精灵

是一各网页图片处理方式,它允许你将一个页面涉及到的所有零星图片包含到一张大图中去

优点:利用css精灵能很好地减少了网页的http请求次数,从而大大的减少了页面的性能

缺点:降低开发效率;维护难度加大





css hack:针对不同的浏览器写不同的css样式的过程

\9 ie10之前的ie浏览器解析

+,*,ie7包括ie7之前的浏览器解析

_ie6包括ie6之前的ie浏览器解析





!important提升样式优先级权重





在ie6下高度小于19px的元素,高度会被当做19px处理;

解决ie6下的最小高度是加overflow:hidden;

解决办法:font-size:0;但只能解决到2个像素,小于2个像素这个方法将无法解决



haslayout 根据元素内容的大小或者父级的父级的大小重新计算宽度

display:inline-block

height:(除auto外的任何值)

float:(left或right)

widht:(除auto外的任何值)

zoom:(除normal外的任何值)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:36

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表