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。

  • 相关阅读:
    从Oracle提供两种cube产品说开
    Sql Server DWBI的几个学习资料
    Unload Oracle data into text file
    初学Java的几个tips
    我常用的Oracle知识点汇总
    benefits by using svn
    如何在windows上使用putty来显示远端linux的桌面
    building commercial website using Microsoft tech stack
    Understand Thread and Lock
    Update google calendar by sunbird
  • 原文地址:https://www.cnblogs.com/yanypan/p/2915244.html
Copyright © 2011-2022 走看看