zoukankan      html  css  js  c++  java
  • css 中常见的bug(1)

    1.IE6中浮动元素3px间隔Bug:

    发生场合:发生在一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。

    解决方法:右边元素也一起浮动;或者为右边元素添加IE6 Hack _margin-left:-3px;从而消除3px间距。

    2.IE6/7负margin隐藏Bug

    发生场合:当给一个有hasLayout的父元素内的非hasLayout元素设置负marin时,超出父元素部分不可见。

    解决方法:去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;

    IE6/7下ul/ol标记消失bug:

    发生场合:当ul/ol触发了haslayout并且是在ul/ol上写margin-left,前面默认的ul/ol标记会消失。

    解决方法:给li设置margin-left,而不是给ul/ol设置margin-left。

    原理分析:IE6/7浏览器Bug

    IE6/7下margin与absolute元素重叠bug:

    发生场合:双栏自适应布局中,左侧元素absolute绝对定位,右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。

    解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。

    原理分析:这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。

    IE6/7/8下auto margin居中bug:

    发生场合:给block元素设置margin auto无法居中

    解决方法:出现这种bug的原因通常是没有Doctype,然后触发了ie的quirks mode,加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决,但根据本人亲测,加 with此种方法是无效的,如果没有Doctype即使给元素添加width也无法让block元素居中。

    IE8下input[button | submit] 设置margin:auto无法居中

    发生场合:ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。

    解决方法:可以给为input加上宽度

    IE8百分比padding垂直margin bug:

    发生场合:当父元素设置了百分比的padding,子元素有垂直的margin的时候,就好像父元素被设置了margin一样。

    解决方法:给父元素加一个overflow:hidden/auto。

  • 相关阅读:
    共享内存
    利用消息队列实现ECHO_SRV
    LINUX学习:System V消息队列
    linux:利用socketpair来在进程间传递描述符
    react传参
    ajax、axios、fetch
    js 深拷贝和浅拷贝实现
    css----px、rem、em、vw、vh、vm
    Sass、Less 和 Stylus区别
    箭头函数和普通函数对比
  • 原文地址:https://www.cnblogs.com/yanypan/p/2915244.html
Copyright © 2011-2022 走看看