搜索
浏览器兼容性浏览器的内核MozillaFirefox(Gecko)InternetExplorer(Trident)Opera(Presto)Safari(WebKit)GoogleChrome(WebKit)腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳，不过如果电脑上装的是ie8的话，这些浏览器还是调用ie7的内核。搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE内核；二是高速模式，该模式使用WebKit内核。解决ie7、ie8兼容性最好的办法是在head标签中加入meta类型metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7/，只要IE8一读到这个标签,它就会自动启动IE7兼容模式CSSHack解决浏览器兼容性问题的主要方法是CSShack。由于不同的浏览器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSScode的过程，就叫CSShack,也叫写CSShack。CSSHack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_，而firefox两个都不能认识。等等各浏览器CSShack兼容表：IE6IE7IE8FirefoxOperaSafari!importantYYYYY_Y*YY*+Y\9YYY\0Ynth-of-type(1)YY如何解决浏览器的兼容性在head标签中加入meta类型metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7/，这样就解决了ie7、ie8兼容问题。现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题，我们需要使用CSSHack来解决该问题。代码如下所示：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=Content-Typecontent=text/html;charset=utf-8/metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7/title浏览器兼容性问题/titlestyletype=text/css.t1{color:#000000;/*所有浏览器都支持此处填写Firefox的css*/*color:#0000FF;/*ie6id7支持此处填写ie7的css*/_color:#66CCCC;/*ie6支持此处填写ie6的css*/}@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){.t1{color:#9900FF}}/*oprea支持此处填写oprea的css*/@mediascreenand(-webkit-min-device-pixel-ratio:0){.t1{color:#336600}/*Chrome、Safari支持此处填写Chrome的css*/}/style/headbodydivclass=t1ff、ie8、ie7、ie6、oprea、Safari兼容性css书写模式br.t1{color:#000000;/*所有浏览器都支持此处填写Firefox的css**/br*color:#0000FF;/*ie6id7支持此处填写ie7的css*/br_color:#66CCCC;/*ie6支持此处填写ie6的css*/br}br/*oprea支持此处填写oprea的css*/br@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0)br{.t1{color:#CC66FF}}br/*Chrome、Safari支持此处填写Chrome的css*/br@mediascreenand(-webkit-min-device-pixel-ratio:0){.t1{color:#336600}}}/div/div/body/html常见的浏览器兼容问题Css样式是与DOCTYPE引入的W3C//DTD有关的，不同的dtd对css的解析也不同，我们现在统一使用!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN兼容问题：1.默认的内外边距不同问题：各个浏览器默认的内外边距不同解决：*{margin:0;padding:0;}2.水平居中的问题问题：设置text-align:centerie6-7文本居中，嵌套的块元素也会居中ff/opera/safari/ie8文本会居中，嵌套块不会居中解决：块元素设置1、margin-left:auto;margin-right:auto2、margin:0auto;3、divalign=”center”/div3.垂直居中的问题问题：在浏览器中想要垂直居中，设置vertical-align:middle;不起作用。例如：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中显示p文本/p，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。解决：设置p的margin:0px，再设置div的padding-top和padding-bottom9.IE6-7图片下面有空隙的问题问题：块元素中含有图片时，ie6-7中会出现图片下有空隙解决：1、在源代码中让/div和img在同一行2、将图片转换为块级对象display:block;3、设置图片的垂直对齐方式vertical-align:top/middle/bottom4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置：overflow:hidden;5、设置图片的浮动属性float:left;10.IE6双倍边距的问题问题：ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题例float:left;width:100px;margin:0100px;解决：设置display:inline;11.IE6weidth为奇数，右边多出1px的问题问题：父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素解决：将宽度的奇数值改成偶数12.IE6两个层之间3px的问题问题：左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距解决：1、右边层也采用浮动float2、左边层添加属性margin-right:-3px;13.IE6子元素绝对定位的问题问题：父级元素使用padding后，子元素使用绝对定位，不能精确定位解决：在子元素中设置_left:-20px;_top:-1px;14.显示手型cursor:hand问题：ie6/7/8、opera都支持但是safari、ff不支持解决：写成cursor:pointer;(所有浏览器都能识别)15.IE6-7line-height失效的问题问题：在ie中img与文字放一起时，line-height不起作用解决：都设置成float16.td自动换行的问题问题：Table宽度固定，td自动换行解决：设置Table的table-layout:fixed，td的word-wrap:break-word17.子容器浮动后，父容器扩展问题问题：子容器都float以后，父容器没有设定高度,父容器将不会扩展解决：只需要添加一个clear:both的div，代码如下：divstyle=border:1pxsolid#333;width:204pxdivstyle=width:100px;border:1pxsolid#333;float:left;子容器a/divdivstyle=width:100px;border:1pxsolid#333;float:left;子容器b/divdivstyle=clear:both/div/div18.透明png图片会带背景色问题：在ie6下透明的png图片会带一个背景色解决：background-image:url(icon_home.png);/*其他浏览器*/background-repeat:no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');/*IE6*/_background-image:none;/*IE6*/19.list-style-position默认值的问题问题：ie下list-style-position默认为inside,firefox默认为outside解决：css中指定为outside即可解决兼容性问题20.list-style-image准确定位的问题问题：li前设置图片时，图片与其后的文字对齐问题解决：1、采用背景定位和字符缩进的方法background:url()no-repeatleftcenter;text