zoukankan      html  css  js  c++  java
  • 常见的几个浏览器兼容问题

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同⼀段代码有不同的解析,造成页⾯显示效果不统一的情况。

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

    出现问题:IE6中后面的⼀块被顶到下一⾏

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

    兼容问题二:⾏内属性标签,设置display:block后采用float布局,又有横⾏的margin的情况,IE6间距bug
    出现问题:IE6⾥的间距比超过设置的间距
    解决方案:在display:block;后面加入display:inline;display:table;

    兼容问题三:⼦元素绑架父元素的margin-top
    出现问题:这个问题主要出现在非IE浏览器中。如果子元素和⽗元素之间没有任何内容,将⼦元素设置margin-top后,⼦
    元素不会动,⽽⽗元素会因为margin-top往下移动。
    解决方案:在⽗元素和子元素之间加入<div stye=‘height:0’>&nbsp;</div>。或者设置父元素的padding-top。

    兼容问题四:标签最低高度设置min-height不兼容
    出现问题:因为min-height本身就是⼀个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
    解决方案:如果我们要设置⼀个标签的最⼩高度200px,需要进行的设置为:{min-height:200px; height:auto !important;
    height:200px; overflow:visible;}
    备注:当内容小于一个值(如300px)时。容器的高度为300px;
    当内容⾼度⼤于这个值时,容器高度被撑高,⽽不是出现滚动条。这时候我们就会面临这个兼容性问题。

  • 相关阅读:
    英语语法最终珍藏版笔记-9非谓语动词
    英语语法最终珍藏版笔记-8虚拟语气
    英语语法最终珍藏版笔记-7被动语态
    英语语法最终珍藏版笔记-6“情态动词+have+ done”的含义
    photonView 空指针异常
    What is Photon Server?
    photon server (1)
    Unity3D中的Coroutine及其使用(延时、定时调用函数)
    box head上身旋转问题
    unity-点乘和叉乘的应用
  • 原文地址:https://www.cnblogs.com/yin-yi/p/4679031.html
Copyright © 2011-2022 走看看