zoukankan      html  css  js  c++  java
  • bug集合令

    /*温馨提示:若觉得黑白的反差“亮瞎眼”,可适当调低屏幕亮度~*/

      总结,总结,总结......并非完全版,欢迎各种补充啊~

      1.IE6下的躲猫猫(Peekaboo Bug)

        描述:在IE6下,当同一容器中,同时有浮动,非浮动,清除浮动元素且非浮动元素处于浮动与清除浮动元素之间,父容器设置了背景,在未改变背景状态时,非浮动元素内容是被隐藏起来的,就好像内容躲在父容器的背景下一样,当鼠标按住在应该显示内容的地方滑动或拖动滚动条时才显示内容。

        解决方案:1.不给父容器加背景

             2.保持float与clear属性的元素相邻

             3.给父容器明确的高度/宽度,通常设置  _height:1%;

             4.父容器与浮动元素都设置position:relative;


      2.IE6小的双边距bug

        描述:在IE6下,块元素浮动并设置了横向margin时,表现出来的margin值为正常值的两倍。

        解决方案:将块元素设置为内联元素 display:inline;


      3.IE6下的最小高度问题

        描述:在IE6下,默认的最小高度为19px,当设置元素高度小于19px时,高度显示为19px。

        解决方案:1.设置font-size:0; 但该方法有局限性,在高度小于2px时,高度显示值为2px;

             2.设置overflow:hidden; 完美解决该bug


      4.IE6,7下的浮动3px bug

        描述:在IE6,7下,为了是块级元素同行显示,我们会设置其中一个元素为浮动元素,但此时浮动元素与非浮动元素之间会多出大约3px的间距,在li元素中,还好导致同行元素折行。

        解决方案:给要同行显示的元素都加浮动属性


      5.IE6,7下li的间隙问题

        描述:在IE6,7下,li元素本身无浮动,内容浮动时,li元素下会出现几像素边距。

        解决方案:1.给li加float加浮动并设置宽,同时给ul清浮动(比较麻烦的方法)

             2.给li元素设置vertical-align属性,一般设置为 vertical-align:top;


      6.图片下方出现的几px像素

        描述:用图片撑开div是时可以发现图像下方多出几px的空白。

        解决方案:1.设置 display:block; 但此时图像会独占一行

             2.给图像设置 vertical-align:top;


       7.margin collapse(margin重叠)

        详细描述与解决方案见[CSS小结]~


      8.IE6下相对定位容器中的绝对定位元素

        描述:在IE6下,设置了相对定位属性的容器,容器中的绝对定位元素定义的left与bottom会有异常,如果相对定位容器内没有内容撑开时,绝对定位的元素会消失。

        解决方案:此时可以为相对定位的元素设置相关属性触发haslayout属性,eg._zoom:1; 或_height:1%;


      9.IE6下奇数宽bug

        描述:在IE6下,设置了相对定位属性的容器,容器中的绝对定位元素在定义了right为0时,若此时的父容器宽度为奇数时,绝对定位元素会在右边出现几像素的空隙,奇葩的是,若绝对定位元素是定义left为0时就不会出现空隙。

        解决方案:将相对定位的父级宽度设为偶数。


      10.IE6下加链接的图片

        描述:当我为图片外加链接标签时,在IE6下图片会出现链接边框

        解决方案:给全部图片去边  img{ border:none; }


      11.IE8下th继承失效

        描述:在网页设计中,常常会利用到一些样式的继承性,表格标签th本该继承table的text-align,但在IE8下,继承失效。

        解决方案:显式的为th设置继承  text-align: inherit;

               直接设置th应有的text-align属性;


      12.IE6,7下inline-block失效

        描述:在IE6,7对元素设置inline-block属性会没效果。

        解决方案:对于内联元素,触发haslayout属性后,其表现与inline-block类似;

             对于块状元素,触发haslayout,并设置display:inline;属性后,其表现与inline-block类似;


      13.IE6下浮动元素中注释太多导致出现重复字符

        描述:浮动元素之间有注释,且最后一个元素有文本时,文字会重复,注释个数越多,重复字数越多。

        解决方案:将最后一个浮动元素的右外边距设为-3px;

             将父容器的宽度加宽3px;

    欢迎补充~~

  • 相关阅读:
    jmeter根据负载量计算并发用户数实例
    学生指导——德育
    命令行模式(非GUI模式)下执行jmeter,生成HTML性能测试报告,自定义线程数;
    jmeter 测试某系统5分钟内能完成5000笔查询业务,且90%的响应时间不超过3s,并求出需要设置的线程数
    jmeter 测试某网页最大并发用户数;
    ZOJ 3213
    POJ 2411 插头DP
    滑雪(ski)
    Puzzles
    Lorenzo Von Matterhorn
  • 原文地址:https://www.cnblogs.com/pada/p/3643052.html
Copyright © 2011-2022 走看看