zoukankan      html  css  js  c++  java
  • 常见浏览器兼容性问题及解决办法总结

    1. 不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同;

    解决办法:在CSS文件开头,加*{margin: 0; padding: 0;},把所有标签的margin和padding设置为0即可。

    2. 在IE6中,块元素设置float并且有水平方向的margin时,margin显示出来会比设置的值大,会导致最后一块元素被顶到下面去;

    解决办法:可以将块级元素display设置为inline。

    3. 在IE6,IE7等浏览器,标签高度小于10px时,实际的高度会超出设置的高度,这是因为浏览器给标签设置了一个默认的最小高度;

    解决办法:设置{overflow: hidden;},或者设置line-height小于你设置的高度。

    4. 在某些浏览器中,图片有默认的间距(所有有文字属性的标签都会有边距,除非两个标签连在一起没有隔开);

    解决办法:使用float为img布局,因为所有标签设置float之后都会变成块级元素,块级元素浮动时会紧挨在一起,没有边距;此外可以让HTML的img标签紧挨在一起,不要隔开,但是会影响HTML文档的结构,不太美观。

    5. 标签最低高度设置min-height不兼容问题;

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

    6. IE9以下浏览器不能使用opacity;

    解决办法:{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。

    7.两个块级元素,父元素设置了overflow:auto,子元素设置了position:relative ,且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;

    解决办法:父级元素设置position:relative。

  • 相关阅读:
    分页字符串帮助类
    CSS--九宫格滑过变红色
    css --- flex布局
    MongoDB数据库
    background属性和position属性
    js------this关键字
    js程序-- DNA相关问题
    express4.X--中间件
    CSS——<img>标签图片适配居中问题
    git学习———建立git仓库上传github和从github上下载工程
  • 原文地址:https://www.cnblogs.com/yuanyiming/p/10777138.html
Copyright © 2011-2022 走看看