zoukankan      html  css  js  c++  java
  • 浏览器的兼容性

    常见的bug;

    1应该记住的一些浏览器css写法

    2图片默认有间距

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

    4子标签不撑开父的高度

    5谷歌浏览器支持小于12px的字体

    6 opacity 定义元素的不透明度

    浏览器兼容问题一    (100%遇到)

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

    解决方案:CSS里    *{margin:0;padding:0;}

    浏览器兼容问题二:图片默认有间距

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

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

    (我曾经使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,禁止他们使用)

    浏览器兼容问题三:标签最低高度设置min-height不兼容    

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

    浏览器兼容问题四:一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度。

    解决方法: 在子标签最后清浮动 {<div style="height:0;clear:both;">&nbsp;</div>} 父标签添加{overflow:hidden;} 给父标签设置高度

    内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug 
    解决方案: 在display:block;后面加入display:inline;display:table;

    浏览器兼容问题五: 谷歌浏览器支持小于12px的字体, 所有的都按照12px去识别

    设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
    解决方案: 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
     

    浏览器兼容问题六:opacity 定义元素的不透明度

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);/*ie支持该属性*/

    opacity:0.8;/*支持css3的浏览器*/

    浏览器兼容问题七: 元素水平居中问题

    FF: margin:0 auto;

    IE: 父级{ text-align:center; }

  • 相关阅读:
    AB压力测试(Windows)
    Ensure You Are Not Adding To Global Scope in JavaScript(转)
    使用jasmine来对js进行单元测试
    HTML5安全:CORS(跨域资源共享)简介(转)
    asp.net+jquery Jsonp使用方法(转)
    在ios上时间无法parse返回 "Invalid Date"(转)
    用document.domain完美解决Ajax跨子域 (转)
    IE10、IE11 User-Agent 导致的 ASP.Net 网站无法写入Cookie 问题
    NodeJs:module.filename、__filename、__dirname、process.cwd()和require.main.filename 解惑(转)
    关于反射的一些总结(转)
  • 原文地址:https://www.cnblogs.com/sjd1118/p/5733897.html
Copyright © 2011-2022 走看看