浏览器兼容
base.css中内容:1.清除默认样式(不要用的*通配符);2添加公共类.clearfix;3版心容器.container;4.img{display:block; border:0 none;}
1浏览器基本常识
1.1常用浏览器
1.Interner Explorer, Safari ,Mozilla Firefox, Google Chrome, Opera;
2.最早的浏览器:Mosaic/Netscape Navigator(网景领航者),简称NW。
1.2五大浏览器内核
1.Trident: IE、腾讯、360浏览器,此内核只能用在windows;
2.Gecko:Firefox 主要特点:可以跨平台;
3.Webkit:Safari, Chrome 主要特点:开源项目;
4.Presto:Opera 公认渲染速度最快;
5.Blink:Goole与Opera 一起开发,2013年4月发布。
1.3为何会出现浏览器兼容问题
开发者不同,核心架构和代码很难重合,厂商出于自身考虑也会有技术壁垒。
1.4 CSS Bug、CSS Hack和Filter
CSS Bug:在浏览器中解析不一致的情况,在浏览器中不能正确显示的问题。
CSS Hack:兼容CSS在不同浏览器中正确显示的技巧方法,非官方。
Filter:表示过滤器,是一种用来过滤不同浏览器的Hack类型。
2浏览器常见兼容问题
2.1图片边框问题
Bug:在超链接里添加图片,ie8以下图片存在默认的边框问题。
Hack: 添加声明border:0 none;
2.2图片间隙问题
Bug:在div中插入img,img为行内块级元素,存在默认基线对齐问题,盒子高度会比图片高大概3px。
Hack1: 添加声明 display:block;
Hack2: div{font-size:0;}
2.3双倍浮向问题
Bug:当IE6及更低版本在解析元素浮动时,会错误地把浮向边界margin双倍显示。
Hack: 添加声明 display:inline;
2.4默认高度(IE6,IE7)
Bug:在IE6及以下版本,部分块级元素拥有默认高度(在16px左右)。
Hack1: element{font-size:0;}
Hack2:{overflow:hidden;}生成独立渲染区域
2.5 表单元素高度不一致
Hack:给表单元素添加声明 float:left/right;
2.6 按钮元素默认大小不一
Hack:在input外边套div,在这个标签里写按钮样式,把input边框去掉。
2.7百分比Bug
Bug:ie6及以下解析百分比时,会四舍五入,认为50%+50%>100%。
Hack:两个元素都添加声明 float:left; 并给第二个元素添加声明 clear:right;
2.8 列表中a标签显示Bug
Bug:在布局如导航条等ul>li>a中,我们一般让li 浮动,如果不给a添加float,会存在阶梯显示问题。
Hack:把声明display:block; 改为float:right/left;
2.9 鼠标指针bug
Bug:cursor:hand; 只有ie9以下识别。
Hack:如统一某元素鼠标指针形状为手形,添加声明 cursor:pointer;
2.10透明属性
Bug:声明opacity:0-1;IE不识别。
Filter:用声明alpha(opacity=value(1-100))代替,兼容ie。
2.11 margin塌陷(与高度塌陷区分)
Bug:当前元素(父元素里第一个子元素)与父元素没有设置任何浮动的情况下,第一个子元素设置margin-top后,会错误把margin-top加在父元素上。
Hack1:给父元素添加声明 overflow:hidden; 形成独立渲染区域。
Hack2:给父元素添加 float,不推荐,会让父元素脱离标准流。
Hack3:给父元素添加border,只有border-top存在时才有效。
Hack4:把子元素的margin-top改为父元素的padding-top。
Hack5:子元素float。
2.12 margin Bug
当两个上下排列的元素,上面的元素有声明margin-bottom:30px; ,下面的元素有声明margin-top:20px; 他们中间的距离不会叠加,而是会被浏览器解析为其中较大的值。
3网页制作心得
1.box在布局时,顺序为从左到右,从上到下。
2.伪元素如 li::after ,不论是否display:block,都要添加声明conten:””;