zoukankan      html  css  js  c++  java
  • 常见的浏览器兼容性问题与解决方案——CSS篇

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

    问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大。

    碰到频率:100%

    解决方案:初始化CSS的默认样式,*{margin:0;padding:0}。也可以使用其他网站的初始化代码

    备注:这个是最常见的也是最容易解决的一个浏览器兼容性问题。

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

    问题症状:常见的是IE6中后面的一块被顶到下一行。

    碰到频率:90%

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

    3、设置较小高度标签,在IE6、IE7和遨游浏览器中高度超出自己设置的高度

    问题症状:IE6、IE7和遨游浏览器里这个标签的高度不受控制,超出自己设置的高度。

    碰到频率:60%

    解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。

    4、行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

    问题症状:IE6里的间距比超过设置的间距。

    碰到频率:20%

    解决方案:在display:block;后面加入display:inline;display:table;

    5、图片默认有间距

    问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了margin:0;和padding:0也不起作用。

    碰到频率:20%

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

    6、标签最低高度设置min-height不兼容

    问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容。

    碰到频率:20%

    解决方案:如果我们需要设置一个标签的最小高度是200px,需要进行的设置为:{min-height:200px;height:auto !importtant;height:200px;overflow:visible;}

  • 相关阅读:
    Sum Root to Leaf Numbers 解答
    459. Repeated Substring Pattern
    71. Simplify Path
    89. Gray Code
    73. Set Matrix Zeroes
    297. Serialize and Deserialize Binary Tree
    449. Serialize and Deserialize BST
    451. Sort Characters By Frequency
    165. Compare Version Numbers
    447. Number of Boomerangs
  • 原文地址:https://www.cnblogs.com/fengxiongZz/p/7954218.html
Copyright © 2011-2022 走看看