首页 > 文章 > web前端 > CSS的常见兼容性问题解决方案

CSS的常见兼容性问题解决方案

php中世界最好的语言原创: 2018-03-14 13:47:521875浏览

这次给大家带来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(&#39;element&#39;).innerText =   "my text";
}   else{        document.getElementById(&#39;element&#39;).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中文网其它相关文章！