zoukankan      html  css  js  c++  java
  • IE 常见bug

    1. 双空白边浮动bug

    最常见且最容易发现的bug 之一是IE6和更低版本中的双空白边浮动bug。顾名思义,这个Windows bug使任何浮动元素上的空白边加倍

    image-thumb2

    这个bug 很容易修复,将元素的display 属性设置为inline 就行了.因为元素是浮动的,将display 属性设置为inline 实际上不会影响显示方式。但是,这似乎会阻止Windows 上的IE6和更低版本将所有空白地加倍。这是一个非常容易发现和修复的bug : 每当对具有水平空白边的元素进行浮动时,都应该很自然地将display 属性设置为inline。

    2. 像素文本偏移bug(3像素)

    另一个非常常见的I E 5-61Win bug 是3像素文本偏移bug。当文本与二个浮动元示相邻时,这个bug 就会表现出来。例如,假设将-个元素向左浮动,并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边,其宽度等于浮动元素的宽度:
    .myFloat { float: left; 200px; }
    p { margin-left: 200px; }
    如果这么做,在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙。

    image-thumb3

    修复这个bug 需要双管齐下。首先,给包含文本的元素设置任意的高度。这会迫使元素拥有布局,这在表面上会消除文本偏移。因为Windows 上的IE6和更低版本将height作为min-height那样对待,所以设置一个小的高度并不会影响元素在这些浏览器巾的实际尺寸。但是,这会影响其 他浏览器,所以要使用Holly招数对除了Windows 上的IE6 和更低版本之外的所有其他浏览器隐藏这个规则,

    /* Hide from IE5-Mac. Only IE-Win sees this. */
    * html p { height: 1%; }
    /* End hide from IE5/Mac */

    不幸的是,这么做会导致另一个问题。正如在前面学到的,拥有布局的元素被限制为矩形的,并且出现在浮动元索的旁边而不是它们的下面。添加200像素 的空白边实际上会在IE 5-6/Win 中在浮动元素和段落之间产生200像素的间隙。为了边免这个问隙,需要将IE 5-6/Win 上的空白边重新设置为零:

    /* Hide from IE5-Mac. Only IE-Win sees this. */
    * html p { height: 1%; margin-left: 0; }
    /* End hide from IE5/Mac */

    文本偏移被修复了,但是现在另一个3像亲间隙出现了,这一次是在浮动元素上。为了去掉这个问隙,需要在浮动元素上设置一个负值的3像素右空白边:

    /* Hide from IE5-Mac. Only IE-Win sees this. */
    * html p { height: 1%; margin-left: 0; }
    * html .myFloat { margin-right: -3px; }
    /* End hide from IE5/Mac */

    如果浮动元素是除了图像之外的任何其他东西,那么这个问题己经修复了。但是,如果浮动元旦在是图像,那么还有放后一个问题需要解决。 IE 5.x/Win在图像的左右都添加3像亲的间隙。而IE6不改变图像的空白边。因此,需要用另一个招术在IE 5.x/Win 上去掉3 像素的问隙:

    /* Hide from IE5-Mac. Only IE-Win sees this. */
    * html p { height: 1%; margin-left: 0; }
    * html img.myFloat { margin: 0 -3px; ma gin: 0; }
    /* End hide from IE5/Mac */

    这会解决问题,但是采用的方式很难看而且太复杂。因此,如果可能的话,最好将这些规则分别放进单独的浏览器特定的样式表中。如果这样做,用于Windows 上的lE 5.x的样式表如下:

    p { height: 1%; margin-left: 0; }
    img.myFloat { margin: 0 -3px; }

    用于IE 6的样式表如下:

    p { height: 1%; margin-left: 0; }
    img.myFloat { margin: 0; }

    3. IE 6躲躲猫bug

    另一个奇怪而且很烦人的 bug 是IE6 的躲躲猫(peek-a-boo) bug,之所以起这个名称是因为在某些条件下文本看起来消失了,只有在前新装载页面时才再度出现。出现这个bug 的条件是:一个浮动元素后面跟着一些非浮动元素,然后是一个清理元素,所有这些元素都包含在一个设置了背景颜色或阅像的父元束中。如果清理元素碰到了浮动 元素,那么中间的作浮动元素看起来消失了,隐藏到了父元素的背景颜色或图像后面,只有在刷新页面时才重新出现

    image-thumb4

    解决方法:

    1.明确的指定最外面div容器的宽度(相对宽度和绝对宽带都可以)。
    2.去掉最外面div容器的背景颜色(或者背景图片)
    3.缩小浮动div容器的高度到一定程度
    4.不浮动div容器
    5.不使用<div class=”clear”><div>技术

    4. 相对容器中的绝对定位

    将绝对定位的元素嵌套在相对容器中是多么有用。但是,IE 6和更低版本在使用这种技术时有许多bug。

    image-thumb5

    这些bug 的原因在于相对定位的元素没有获得IE/Win 的内部hasLayout 属性。因此,它们不创建新的定位上下文,所有绝对定位元素相对于窗口进行定位

    为了使Windows 上的IE 6和更低版本的表现正确。需要迫使相对应位的容器拥有布局。一种方法是在容器上显式地设置width 和height。但是,常常希望在不知道容器的width 和height的况下,或者在需要这些属性保持灵活的情况下使用这种技术。

    可以使用Holly 招数为容器提供一个的高度。这会让容器拥有布局。但是因为IE 6和更低版本中的元素会不正确地扩展以适应它们的内容,所以设置小的高度不会影响实际高度。

    /* Hides from IE-Mac */
    * html .container { height: 1%; }
    /* End hide from IE-Mac */

    5.  不缓存图片

    IE6下默认不缓存背景图片,CSS背景图片每次使用都会重新发送请求(非本地),CSS里每次更改图片的位置时,连一个hover效果时候同样的背景图片仅仅位置不同而已,ie6都会再次发送请求,解决方法:
    1. html {filter:expression(document.execCommand(“BackgroundImageCache”, false, true));} 缺点:可能会使整个页面的加载速度变慢

    2 try {
    document.execCommand(‘BackgroundImageCache’, false, true);
    } catch(e) {}
    或者 if ($.browser.msie) {
    document.execCommand(“BackgroundImageCache”, false, true);
    }
    或者<!–[if lt IE 7]>
    <script>document.execCommand(“BackgroundImageCache”,false,true);</script>
    <![endif]–>

    有时候不是我们失去了目标,而是失去了方向。
  • 相关阅读:
    走线规范-标识
    python学习之网路操作
    python学习之函数
    RTT学习之软件包
    RT_THREAD之组件学习
    RT_THREAD之nano学习
    物联网相关的模块
    JavaScript学习笔记之二
    javascript完美实现图片拖动改变顺序
    响应式WEB设计的9项基本原则
  • 原文地址:https://www.cnblogs.com/871735097-/p/4736401.html
Copyright © 2011-2022 走看看