zoukankan      html  css  js  c++  java
  • 兼容性问题

    浏览器兼容性常见

    浏览器兼容性常见

    浏览器兼容问题⼀:不同浏览器的标签默认的外补丁和内补丁不同

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

    碰到频率:100%

    解决⽅案:CSS⾥ *{margin:0;padding:0;}

    备注:这个是最常 的也是最易解决的⼀个浏览器兼容性问题,⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签 的内外补丁是0。

    浏览器兼容问题⼆:块属性标签float后,⼜有横⾏的margin情况下,在IE6显⽰margin⽐设置的⼤

    问题症状:常 症状是IE6中后⾯的⼀块被顶到下⼀⾏

    碰到频率:90%(稍微复杂点的 ⾯都会碰到,float布局最常 的浏览器兼容问题)

    解决⽅案:在float的标签样式控制中加⼊ display:inline;将其转化为⾏内属性

    备注:我们最常⽤的就是div+CSS布局了,⽽div就是⼀个典型的块属性标签,横向布局的时候我们通常都是⽤div float实 现的,横向的间距设置如果⽤margin实现,这就是⼀个必然会碰到的兼容性问题。

    浏览器兼容问题三:设置较⼩⾼度标签(⼀般⼩于10px),在IE6IE7,遨游中⾼度超出⾃⼰设置⾼度

    问题症状:IE6、7和遨游⾥这个标签的⾼度不受控制,超出⾃⼰设置的⾼度

    碰到频率:60%

    解决⽅案:给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。

    备注:这种情况⼀般出现在我们设置⼩圆⾓背景的标签⾥。出现这个问题的原因是IE8之前的浏览器都会给标签⼀个最⼩ 默认的⾏⾼的⾼度。即使你的标签是空的,这个标签的⾼度还是会达到默认的⾏⾼。

    浏览器兼容问题四:⾏内属性标签,设置display:block后采⽤float布局,⼜有横⾏的margin的情况,IE6间距bug

    问题症状:IE6⾥的间距⽐超过设置的间距

    碰到⼏率:20%

    解决⽅案:在display:block;后⾯加⼊display:inline;display:table;

    备注:⾏内属性标签,为了设置宽⾼,我们需要设置display:block;(除了input标签⽐较特殊)。在⽤float布局并有横向的 margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本⾝就是⾏内属性标签,所以我们再加 上display:inline的话,它的⾼宽就不可设了。这时候我们还需要在display:inline后⾯加⼊display:talbe。

    浏览器兼容问题五:⼦元素绑架⽗元素的margin-top

    问题症状:这个问题主要出现在⾮IE浏览器中。如果⼦元素和⽗元素之间没有任何内容,将⼦元素设置margin-top后,⼦ 元素不会动,⽽⽗元素会因为margin-top往下移动。

    碰到⼏率:80%

    解决⽅案:在⽗元素和⼦元素之间加⼊<div stye=‘height:0’> </div>。或者设置⽗元素的padding-top。

  • 相关阅读:
    自动同步日期dos命令 | DOS命令自动同步时间
    Mysql字符串截取,去掉时间,匹配日期等于今日
    HTML指定页面编码
    Mysql连接字符,字段函数concat()
    功能强大的截图工具snipaste
    当页面提交时,执行相关JS函数检查输入是否合法
    DOM和BOM
    JS内建對象(Math,Number,String,Date)
    JS数组基础01(数组的创建,push,pop,unshift,shift,concat,join,splice,slice,sort.reverse,indexOf,三种排序)
    总结01(对象引用的赋值与对象的复制,函数作为对象及回调递归,区分数组与对象)
  • 原文地址:https://www.cnblogs.com/sosore/p/5352856.html
Copyright © 2011-2022 走看看