浏览器兼容性大全.doc
35页
.浏览器兼容性浏览器的核Mozilla Firefox ( Gecko )Internet Explorer ( Trident )Opera ( Presto )Safari ( WebKit )Google Chrome ( WebKit )腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳，不过如果电脑上装的是ie8的话，这些浏览器还是调用ie7的核搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE核；二是高速模式，该模式使用WebKit核解决ie7、ie8兼容性最好的方法是在head标签中参加meta 类型，只要IE8一读到这个标签,它就会自动启动IE7兼容模式CSS Hack解决浏览器兼容性问题的主要方法是CSS hack由于不同的浏览器，比方Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hackCSS Hack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系我们就可以根据这个来针对不同的浏览器来写不同的CSS比方 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识等等各浏览器CSS hack兼容表： IE6IE7IE8FirefoxOperaSafari!important Y YY YY _Y *YY *+ Y \9YYY \0 Y nth-of-type(1) YY如何解决浏览器的兼容性在head标签中参加meta 类型，这样就解决了ie7、ie8兼容问题现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一核)、Opera这几种浏览器的兼容性问题，我们需要使用CSS Hack来解决该问题。
代码如下所示：
.t1{ color:*000000; /* 所有浏览器都支持 此处填写Firefox的css**/
*color:*0000FF; /* ie6 id7 支持 此处填写ie7的css*/
_color:*66CCCC; /* ie6支持 此处填写ie6的css*/
}
/* oprea支持此处填写oprea的css*/
media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{ .t1{color:*CC66FF}}
/* Chrome、Safari支持 此处填写Chrome的css*/
media screen and (-webkit-min-device-pixel-ratio:0){.t1{color:*336600}}}
例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle1，但是文本框的容不会垂直居中解决：给容器设置一个与其高度一样的行高line-height:与容器的height一样4. 关于高度问题问题：如果是动态地添加容，高度最好不要定义浏览器可以自动伸缩，然而如果是静态的容，高度最好定好如果设定了高度，容过多时，ie6下会自动增加高度、其他浏览器会超出边框解决：1.设置overflow:hidden;2.高度自增height:auto!important;height:100px; 5. IE6 默认的div高度问题：ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度解决：为这个容器设置以下属性之一1、设置overflow:hidden;2、设置line-height:1px;3、设置zoom:0.086. IE6 最小高度(宽度)的问题问题：ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度解决：使用ie6不支持但其余浏览器支持的属性!important。
设置属性min-height:200px; height:auto !important; height:200px; 7. td高度的问题问题：table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度解决： 设置line-height和height一样在ie中如果td中的没有容，那么border将不会显示8. div嵌套p时，出现空白行问题：div中显示文本，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行解决：设置p的margin:0px，再设置div的padding-top和padding-bottom9. IE6-7图片下面有空隙的问题问题：块元素中含有图片时，ie6-7中会出现图片下有空隙解决：1、在源代码中让
卡西欧5800p使用说明书资料.ppt锂金属电池界面稳定化-全面剖析.docxSG3525斩控式单相交流调压电路设计要点.doc话剧《枕头人》剧本.docx重视家风建设全面从严治党治家应成为领导干部必修课PPT模板.pptx黄渤海区拖网渔具综合调查分析.docx2024年一级造价工程师考试《建设工程技术与计量（交通运输工程）-公路篇》真题及答案.docx【课件】Unit+3+Reading+and+Thinking公开课课件人教版（2019）必修第一册.pptx嵌入式软件开发流程566841551.doc生命密码PPT课件.ppt爱与责任-师德之魂.ppt制冷空调装置自动控制技术讲义.ppt
