浏览器相关兼容及解决方法

A、为什么会出现浏览器兼容问题?

	 1、各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得要麻烦
	 2、由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床

B、浏览器内核以及代表作品

	 1、Trident   代表作:IE
	 元老级内核之一,由微软开发,并于1997年10月首次在ie 4.0中使用,凭借其windows垄断优势,Trident市场占有率一直很高。然而垄断并非,没有竞争就没有进步,长期以往,Trident内核一度停滞不前,更新缓慢,甚至一度与W3C标准脱节。2011年,从ie 9开始,Trident开始支持HTML5和CSS 3,因此我们也经常会看到有些网站在浏览时会提示用户(在Internet Explorer 9.0+以上浏览效果最佳)。前端程序员做浏览器兼容一般也不再会考虑ie 8之前的浏览器了。
	 2、Gecko 代表作:Mozilla
	 元老级内核之一,由Netscape公司Mozilla组织开发。1998年,Netscape在于IE浏览器竞争失利之后,成立了非正式组织Mozilla,由其开发新一代内核,后命名为“Gecko”。FireFox也是这班人开发出来了,因此这也就是Mozilla一直使用的内核。
	 Gecko的特点是代码完全公开,因此其开发程度很高,全世界的程序员都可以为其编写代码,增加功能。
	 3、WebKit : 苹果 & 谷歌旧版本
	 这是苹果公司开发的内核,也是其旗下产品Ssfari浏览器使用的内核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎,分别是从KDE的KHTML和KJS衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统开发。
	 Chrome、360极速浏览器以及搜狗高速浏览器也使用Webkit作为内核(在脚本理解方面,Chorome使用自己研发的V8引擎)。
	 4、Blink : 代表作:谷歌 & Opera
	 这是由Google和Opera Software开发的浏览器排版引擎,Google计算将这个渲染引擎作为Chromium计划的一部分,并且在2013年4月公布了这一消息。这一渲染引擎是开源引擎Webkit中WebCore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)浏览器中使用
	 5、Presto   ( Opera前内核 已经废弃 )

C、兼容相关的专业术语

	 CSS Bug、CSS Hack和Filter
		1) CSS Bug: CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
		2) CSS Hack: CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
		3) Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。

常见的浏览器兼容

    A、跟img相关的兼容以及解决方法
		1)图片有边框BUG  
		当图片加<a href=“#”></a>在IE上会出现边框
		Hack:给图片加border:0;或者border:none;
		2)图片缝隙
		描述:在网页中插入图片时,图片会向下方撑大大约三像素。	
		hack1:将<img>转为块状元素,给<img>添加声明:display:block;
		hack2:给img添加声明 vertical-align:top;
		
	 B、表单相关的兼容以及解决方法
		1)表单元素距离顶部间距不一致
		hack:给表单元素添加声明:float:left;
		
	 C、其他相关兼容和解决方法
		1)margin-top的兼容
		子元素没设置任何浮动,设置了margin-top属性后,会错误的把margin-top的属性值添加给父元素
		hack1:给子元素或者父元素设置浮动
		hack2:给父元素添加上边框
		hack3:给父元素添加overflow:hidden;
		2)鼠标指针bug
			描述:cursor属性的hand属性值只有IE9以下浏览器识别,其它浏览器不识别该声明。
			hack:cursor:pointer
		3)透明属性
			兼容其他浏览器写法:opacity:value;(value的取值范围0-1;
			IE浏览器写法:filter:alpha(opacity=value);取值范围 0-100(整数)
			
		4)谷歌浏览器最小字号支持到12px,12px以下的字号不支持
		hack1:直接切图
		hack2:在html或者body里添加一句谷歌浏览器专有的属性
				html,body{ -webkit-text-size-adjust:none; }
				注意点:在新版本的谷歌浏览器里已经无效。
		hack3:CSS3的一个缩放属性:transform:scale()
		例如:.a3{font-size: 10px;transform: scale(0.83);float: left;transform-origin: left;}
		/*这个数字0.833,是缩放比例,可以根据你自己的情况不同而不同。*/
		5)所有浏览器的字体不统一
			hack:给body统一设置字体  比如font-family:微软雅黑

IE浏览器相关兼容(IE浏览器的相关兼容不做重点记忆,了解就好)

     A:图片png24格式的兼容,png24格式在IE6上不透明
		hack:把png24格式换成png8或者GIF格式
	 B:默认高度	(如果是需要看不见一定要加height:0;如果是需要其他的数值,那么就给其他的数值)
		描述:在IE7或者IE6及以下版本中,部分块元素拥有默认高度(在16px左右;)
		hack1:给元素添加声明:font-size:0;
		hack2:给元素添加声明:overflow:hidden;	
	C、双倍浮向(双倍边距)(只有IE6出现)
		描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边边界(margin)加倍显示。
		hack:给浮动元素添加声明:display:inline;
	D、在IE6及更低版本的浏览器里,如果想去掉input的默认边框,不能设置border:none;
		hack:设置input{border:0;}
	E、如果设置了input的高度,在其他浏览器上显示的value的内容是垂直居中的,但是在ie6上是在顶部的
		hack:给input添加一个行高等于它的高度。
	F、在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。(也会受系统影响)
		hack:给右面的浮动元素添加声明:clear:right; 
	G、IE7及以下浏览器li有时候会莫名的向下撑大3-4像素。
		hack:给li添加一个 +margin-top:-3px或者-4px

 这朵小花花送给你,希望你可以每天开心快乐😊o(* ̄▽ ̄*)ブ。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值