CSS的常見相容性問題解決方案

这次给大家带来CSS的常见兼容性问题解决方案，CSS常见兼容性问题的注意事项有哪些，下面就是实战案例，一起来看一下。

一、不同浏览器的标签默认的外补丁和内部顶不同

这个大家就很常见了，我们知道每个浏览器对margin和padding的处理问题很大，我们一般都会碰到这个问题，常用的解决办法就是使用通配符*来将其初始化 
解决办法：

*{    margin：0；    padding:0;}1234

另一种方法建议大家使用的就是使用reset文件，其不仅省心外，还有的两个好处就是方便程序员的的发挥和便于发现前端代码的遗漏。

二、块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大

我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div的float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。问题出现的症状就是iE6通常后面的一块会被挤下去，如果你的代码比较复杂，这个问题将很容易碰到，这是float布局中最常见的问题，

解决方案： 
在float的标签样式控制中加入display:inline;将其转化为行内属性

三、cursor:hand VS cursor:pointer

firefox不支持hand，但ie支持pointer

解决方法: 统一使用pointer

四、 innerText在IE中能正常工作，但在FireFox中却不行.

if(navigator.appName.indexOf("Explorer")   >   -1){        document.getElementById('element').innerText =   "my text";
}   else{        document.getElementById('element').textContent =   "my   text";
}12345

五、 CSS透明

IE：
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。1
FF：
opacity:0.6。1

六、css中的width和padding

在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

七、FF和IE的盒子模型解释不一致导致相差2px

box.style{    width:100;    border 1px;}1234
ie理解为box.width = 100 ff理解为box.width = 100 + 1*2 = 102 //加上边框2px

八、IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

解决办法，我们可以让通过javascript设置。

九、超链接访问后hover样式不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

a:link{};a:visited{};a:hover{};a:active{};1234

十、form标签

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}

十一、图片间距的问题

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了 *{margin:0;padding:0;}的通配符也不起作用。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

十二、IE6不支持fixed

解决办法

.DIV名称{height: 92px;width: 100%;position: fixed;top: 0;_position: absolute;_bottom: auto;_top:expression(eval(document.documentElement.scrollTop));}123456789

解释_是专门用来解决兼性设置的，里面还是通过eval解析javascript代码来设置javascript代码。

十三、IE个版本的hack

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线”“和星号” * “，IE7能识别星号” * “，但不能识别下划线”“，而firefox两个都不能认识。等等 
选择器Hack：比如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。等等 
HTML头部引用(if IE)Hack：针对所有IE：

   /*类内部hack：*/
    .header {_width:100px;}            /* IE6专用*/
    .header {*+width:100px;}        /* IE7专用*/
    .header {*width:100px;}            /* IE6、IE7共用*/
    .header {width:100px\0;}        /* IE8、IE9共用*/
    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
    .header {width:330px\9\0;}    /* IE9专用*/
    /*选择器Hack：*/
    *html .header{} /*IE6*/ 
    *+html .header{}/*IE7*/12345678910111213

总结：

好多相容問題都是關於IE瀏覽器的，推薦大家一個關於測ie相容性的軟體IETester，裡面可以測試關於IE瀏覽器各個版本的兼容，對於其他問題，瀏覽器相容性的問題還有很多，我們在以後的學習中還會遇到，最常用的辦法就是透過if語句或三目運算子去解決它，這很有用，其餘的就是個別屬性有差異，上面也講到了一些解決方法，還是靠自己慢慢累積吧！

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

前端頁面測試的方法

#javascript中call與apply的應用

spring boot的定時任務應該如何使用

#

以上是CSS的常見相容性問題解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！