• 常见的浏览器兼容性问题


    1.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁。

    产生条件:不同浏览器;

    解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置。

    2.横向双倍外边距

    产生条件:在IE6中块元素浮动后,会出现横向双倍margin现象。

    解决办法: 在float标签的样式控制中加入display:inline

    3.默认行高

    产生条件:IE6、IE7、遨游浏览器;设置的文字高度超出盒模型内容区域设置的高度时会影响布局。

    解决办法:给超出高度的标签设置overflow:hidden;或者将文字的行高line-height设置为小于块的高度。

    4.input 聚焦框颜色与样式不同

    产生条件:各个浏览器表现不同;

    处理方法:使用outline:none,清除默认样式之后再统一设置。

    5.img外部的border

    产生条件:img外部有a标签,即img标签有链接时

    解决办法:设置img边框border:0;

    6.图片默认有间距。

    产生条件:img标签(每个img之后敲了回车)

    解决办法:为img设置float的浮动布局方式。

    7.经典3像素bug

    产生条件:IE6浏览器,浮动块元素与未浮动块元素处于同一行,有默认的3px间距。

    解决办法:设置非浮动元素浮动。

    8.默认行高

    产生条件:清除浮动的时候,有些人会采取一种清浮动的方法,使用一个空的div,然后为这个div设置{clear:both}。在大部分

    浏览器当中,这样做是没有任何问题的,但是在IE6浏览器当中,div即使是空的,也会存在默认行高。

    解决办法:设置其高度为0,并设置overflow:hidden。{height:0;overflow:hidden;clear:both;}

    9.a标签hover不适用于所有标签

    产生条件:IE6浏览器中hover只支持a标签的使用,不支持一切其它标签使用;

    解决办法:合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果;详情请查看日志:兼容IE6 a标签hover效果

    10.table标签当中border-color属性设置无效

    产生条件:IE6中table设置属性border-color无效;

    解决办法:运用CSS样式进行控制,而不是使用属性进行样式的处理。

    11.png格式图片

    产生条件:IE6浏览器,不支持透明;

    解决办法:使用javascript进行处理;或者使用gif、jpg图像替代掉png图片的使用。

    12.透明rgba与opacity

    产生条件:IE6不支持此两种透明的设置方法;

    解决办法:使用IE6当中的滤镜filter替代掉,如:opacity:0.6;filter:alpha(opacity=60)。

    13.子选择器在IE6中不能使用

    产生条件:IE6浏览器,使用E>F子选择器;

    解决办法:采用其他选择器或者采用后代选择器进行控制,如:div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。

    14.鼠标移上小手效果

    产生条件:IE6,cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。

    解决办法:设置两种cursor:pointer ; cursor:hand。

    15.子标签无法撑开父标签的高度

    产生条件:父标签内部含一个或多个子标签,父标签没有设置浮动,而子标签发生浮动;

    处理方法:方法1:在子标签最后添加清除浮动的设置<div style='height:0;clear:both'></div>;

            方法2:为父标签添加{overflow:hidden;}的样式;

            方法3:为父标签设置固定高度。

    16.li的间距问题

    产生条件:IE6浏览器 li标签设置宽高,且li里面的元素发生了浮动;

    处理方法:方法1:li不设置宽高; 方法2:li内部的标签不进行浮动。

    17.行内元素布局混乱

    产生条件:行内元素为包含框时,如果包含框包含的绝对定位元素以百分比为单位进行定位;

    处理方法:在行内元素当中加入{zoom:1},触发IE的hasLayout。

    18.多显示一个字

    产生条件:多个浮动元素中间夹杂HTML注释语句,浮动元素宽度设置为100%;则在下一行多显示一个上一行的最后一个字符;

    处理方法:果断删掉注释!

    19.CSS优先级 !important

    产生条件:IE6当中,在同一组CSS属性中,!important不起作用;

    处理方法:单独设置。

    20.img图片下部高度多余5px

    产生条件:IE6浏览器;

    处理方法:将图片转化为块级对象,即display:block。

     

  • 相关阅读:
    C++数字与字符串相互转化
    NextDate问题
    Mac使用host屏蔽某指定网站
    Pycharm里面使用anaconda配置环境
    Logisim
    XML有关知识
    Mac环境下的Tomcat
    Allow apps downloaded from Anywhere
    寻找两数之和
    最大子序列
  • 原文地址:https://www.cnblogs.com/vicky1018/p/7718653.html
Copyright © 2020-2023  润新知