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;
    当内容⾼度⼤于这个值时,容器高度被撑高,⽽不是出现滚动条。这时候我们就会面临这个兼容性问题。

  • 相关阅读:
    欧拉工程第72题:Counting fractions
    欧拉工程第71题:Ordered fractions
    欧拉工程第70题:Totient permutation
    欧拉工程第69题:Totient maximum
    欧拉工程第68题:Magic 5-gon ring
    欧拉工程第67题:Maximum path sum II
    欧拉工程第66题:Diophantine equation
    欧拉工程第65题:Convergents of e
    欧拉工程第64题:Odd period square roots
    欧拉工程第63题:Powerful digit counts
  • 原文地址:https://www.cnblogs.com/yin-yi/p/4679031.html
Copyright © 2011-2022 走看看