书签 分享 收藏 举报 版权申诉 / 15
立即下载 加入VIP,免费下载
当前位置： 首页 > 总结汇报 > IE6特有bug兼容性问题整理.docx

类型IE6特有bug兼容性问题整理.docx

  • 文档编号：18322225
  • 上传时间：2023-08-15
  • 格式：DOCX
  • 页数：15
  • 大小：36.70KB

---------------------------------------------------------------------------------------------

1.关于background的背景图片的fixed固定定位

Firefox是支持background:

fixed;定位的，IE6只能说是半支持，好吧，这么说吧，可能不太严谨，就是背景图片固定的效果似乎只在根结点起作用。

举个很简单的例子：

先看这段css代码：

body{background:

url（../image/404.png）no-repeatfixedcentercenter;}

div{height:

2000px;}

HTML部分为：

其结果是无论IE6还是火狐浏览器下，背景图片都是固定的死死的，不错。

但是，一旦html标签带着background属性参合进来，事情就要发生转变了。

问题代码：

html{background:

white;}

body{background:

url（../image/404.png）no-repeatfixedcentercenter;}

div{height:

2000px;}

结果IE6下，背景不固定了，只看到背景图片随着滚动条上下移动而移动。

演示页面

要解决这个问题呢，也是有办法的，就是将fixed属性转移到html标签上就可以了。

即：

html{background:

whiteurl（../image/404.png）no-repeatfixedcentercenter;}

div{height:

2000px;}

就可以了。

2.关于height:

100%;

要想高度百分比起作用，一般来说，要满足两个条件：

其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。

而这里要讲的是关于body和html的高度百分比显示的。

默认状态下，body不是高度100%显示的，不要看body定义background属性好像body就是满屏显示的，正如上面所推断的，此背景已非body之背景。

用这个body{background:

#039;border:

50pxsolid#C00;}一测便知。

看边框范围是否高度100%显示，答案是否定的。

见下图（截自IE6，Firefox浏览器下表现一致）：

body默认高度是不100%显示的

那么body是否支持height:

100%;呢？

经过我的测试，IE6支持，Firefox浏览器不支持。

要想让Firefox浏览器也支持body的height:

100%;是简单的，就是设置html标签height:

100%;一旦设置了height:

100%;则无论哪个浏览器下body都支持height:

100%;了，而body内部的容器也可以支持height:

100%;了。

前段时间看到XX的一道面试题，说什么透明层无论滚动与否都满屏显示，其实就是对html和body标签做一番手脚，两者高度100%显示，同时溢出隐藏（overflow:

hidden），然后用一个div高度100%系显示，溢出滚动。

而这个透明层就使用绝对定位且与这个div平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。

这其实也就解决IE6下浮动层固定定位的经典方法。

3、document.body和document.documentElement比较：

    document.body是DOM中Document对象里的body节点，document.documentElement是文档对象根节点（html）的引用。

    IE在怪异模型（quickmode）下document.documentElement无法正确取到clietHeightscrollHeight等值，比如clietHeight=0。

可以见IE的怪异模型并没有把html作为盒子模型的一部分，好在现在很少使用怪异模型。

（注：

如果页面没写DTD或写的不对，IE6默认使用怪异模型解析页面）

document.body.scrollHeight和document.documentElement.scrollHeight的区别：

    document.body.scrollHeight是body元素的滚动高度，document.documentElement.scrollHeight为页面的滚动高度，且document.documentElement.scrollHeight在IE和Firefox下还有点小差异。

     IE :

document.documentElement.scrollHeight=document.body.scrollHeight+marginTopbottom高度+上下border宽度

     firefox :

document.documentElement.scrollHeight=document.body.scrollHeight+marginTopbottom高度

这是DOMDocument对象里的body子节点和整个节点树的根节点root。

4、IE6bug.  li在IE中底部3像素的BUG 

解决方案：

在

  • 上加float:

    left；即可解决

    （之后可能还要设置宽度来决定元素的位置什么的）

    5、IE6line-height失效

    因为li中加入图片，会导致line-height失效如:

    当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；同时以上元素的行高可能×2

    解决方法：

     

    对和文字相连接的img、input、textarea、select、object等元素加以属性 

    margin:

    （所属line-height-自身高度）/2px0;

    vertical-align:

    middle

    6、IE6双倍边距

    这个问题之前就遇到过N次，有时候合成的页面，不知道怎么搞的，就是和效果图对不上，后来知道用display:

    inline可以解决。

    但不清楚是怎么造成这个问题，原来又是IE6bug的问题。

    1、问题：

    在IE6下如果某个标签使用了float属性，同时设置了其外补丁“margin:

    10px0010px”可以看出，上边距和左边距同样为10px，但第一个对象距左边有20px。

    2、解决办法：

    当将其display属性设置为inline时问题就都解决了。

    3、说明：

    这是因为块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。

    也许你会问：

    “为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”？

    因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。

    第一个对象是相对父对象的，而第二个对象是相对第一个对象的，所以第二个对象在设置后不会出现问题。

    另外在一些特殊布局中，可能需要组合使用display:

    block;和display:

    inline;才能达到预期效果。

    当然最坏的情况下，我们就可以使用"margin:

    10px0010px;*margin:

    10px0010px;_margin:

    10px005px"，这种“标准属性;*IE7识别属性;_IE6识别属性”HACK方式解决。

    4、总结：

    这个现象仅当块级对象设置了浮动属性后才会出现，内联对象（行级对象）不会出现此问题。

    并且只有设置左边距和右边距的值才会出问题，上下边距不会出现问题。

    7ie6下div被select遮挡解决方法

    在IE中，select属于window类型控件，它会“挡住”所有非window类型控件

    可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，

    他们被渲染在客户区的绘画表面上，

    而select是使用的标准windows控件，只是作为客户区的子控件放置而已，

    它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，比如iframe和其他的select。

    IE7、IE8解决了此BUG。

    有多种种办法：

    1.修改select，不用标准select，而是自己用其他html元素模拟

    2.修改你的div，使用iframe。

    3.在div被显示的时候或者到达select所在位置时隐藏select

    4.在div中或div的同一坐标上，用相同尺寸的iframe先遮挡一下，然后在iframe上显示div的内容。

    5.Object对象的优先度较高，可以挡住select框

     第4种方法的例子：

    最好的方法：

    iframe来当作div的底

    div直接盖不住select，但是div可以盖iframe，而iframe可以盖select，所以，把一个iframe来当作div的底，这个div就可以盖住select了。

    1000px;width:

    1000px;position:

    relative;">

     

    100px;width:

    100px;position:

    absolute;top:

    100px;left:

    100px;">

       

           

           

      

     

    •  

    --[iflteIE6]>

    absolute;width:

    100px;height:

    100px;top:

    100px;left:

    100px;z-index:

    -1;filter:

    alpha（opacity=0）;">

    [endif]-->

    8、IE6PNG透明 

    FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的

    =============================================================================

    此效果简单，。

    。

    。

    。

    相当不错 推荐

     

    style="FILTER:

    progid:

    DXImageTransform.Microsoft.AlphaImageLoader（src=images/fl.png'）"

    语法：

    filter:

    progid:

    DXImageTransform.Microsoft.AlphaImageLoader（enabled=bEnabled,sizingMethod=sSize,src=sURL）

    enabled:

    可选项。

    布尔值（Boolean）。

    设置或检索滤镜是否激活。

    true|falsetrue:

    默认值。

    滤镜激活。

    false:

    滤镜被禁止。

    sizingMethod:

    可选项。

    字符串（String）。

    设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

    crop:

    剪切图片以适应对象尺寸。

    image:

    默认值。

    增大或减小对象的尺寸边界以适应图片的尺寸。

    scale:

    缩放图片以适应对象的尺寸边界。

    src:

    必选项。

    字符串（String）。

    使用绝对或相对url地址指定背景图像。

    假如忽略此参数，滤镜将不会作用。

    实例：

    解决IE6下png透明失效的问题。

    CSS样式:

    .png{

    _background:

    url（no-repeat!

    important; 

    filter:

    progid:

    DXImageTransform.Microsoft.AlphaImageLoader（enabled=true,sizingMethod=noscale,src="

    background:

    none;

    width:

    118px;height:

    133px;

    }

    .pngdiv{position:

    relative;}

    HTML代码：

    CSS背景PNG透明及链接失效问题解决

     

    9、元素可见性

    display:

    none和visibility:

    hidden的区别

     

    不同有三点：

    1.空间占据

    2.回流与渲染

    3.株连性

    第二点，display:

    none隐藏产生reflow和repaint（回流与重绘），而visibility:

    hidden没有这个影响前端性能的问题；

    如果子孙元素应用了visibility:

    visible，那么这个子孙元素又会刘谦般地显现出来。

    {display:

    none;/*不占据空间，无法点击*/}

    {visibility:

    hidden;/*占据空间，无法点击*/}

    {position:

    absolute;top:

    -999em;/*不占据空间，无法点击*/}

    {position:

    relative;top:

    -999em;/*占据空间，无法点击*/}

    {position:

    absolute;visibility:

    hidden;/*不占据空间，无法点击*/}

    {height:

    0;overflow:

    hidden;/*不占据空间，无法点击*/}

    {opacity:

    0;filter:

    Alpha（opacity=0）;/*占据空间，可以点击*/}

    {position:

    absolute;opacity:

    0;filter:

    Alpha（opacity=0）;/*不占据空间，可以点击*/}

    设置height:

    0;overflow:

    hidden我想可以的

    height:

    0和overflow:

    hidden的组合

    overflow:

    hidden用中文理解就是“溢出隐藏”，也就是盒子以外的内容都咔嚓掉不可见的。

    加上height:

    0，只要是一般的非inline水平元素，则元素内部所有子孙都应该是不可见的。

    height:

    0和overflow:

    hidden组合隐藏“失效”的条件如下：

    祖先元素没有position:

    relative/absolute/fixed声明，同时内部子元素应用了position:

    absolute/fixed声明

    hidden;height:

    1;line-height:

    0;">

    IE6.0不支持height:

    0

    10、IE6DIV高度的问题

    1IE6下默认的字体尺寸大致在12–14px之间，当你试图定义一个高度小于这个默认值的div的时候，IE会固执的认为这个层的高度不应该小于字体的行高。

    所以即使你用height:

    4px;来定义了一个div的高度，实际在IE下显示的仍然是一个12px左右高度的层。

    添加overflow:

    hidden;解决问题。

    　　

    4px;overflow:

    hidden;”>

    　　②应该多加一个属性：

    font-size:

    0px;就可以了.因为高度有font-size决定

    　　③

    　　首先要看DIV有无内容，然后才会决定谁影响其高度：

    当DIV为一个空标签的时候：

    DIV有一个默认的高度（大约20px左右吧），如果hiehgt的值小于这个数字，DIV不会有任何反应，大于则可以控制；而line-height在这儿根本没有用，因为没有内容，所以也就不存在行高了。

    　　当DIV标签内有内容时（哪怕是一个 ）：

    DIV的高度依然是默认的（依旧是20px左右），而这时候的height仍然只能设置大于这个数的值，否则DIV不会受控制；但是，这时候却可以使用line-height来控制DIV的高度，准确来说是控制DIV内的内容行高，使DIV受行高的变化而变化。

    　　不过，如果你设置了height的值，那么当line-height小于height的值的时候，DIV取的是height的值；如果line-height大于height的值，那这时候影响DIV高度的就是line-height的值了。

    11、IE6不认识min-height

    但头痛的是IE6就是不认min-height:

    ，这样定好后在IE7\FF里测试是没有任何问题的。

    但我们现在要解决IE6的。

    好在IE6与IE7不同，它可以将一个模块定死高度，当模板里内容大于这个高度时，是会自动撑开这个模块，IE7如果定死高度，内容大于高度时是会被遮住，就是不显示。

    利用这一点。

    我们就可以在代码里设置了，具体如下：

    .left{float:

    left;width:

    200px;}

     

    .right{

    float:

    right;

    width:

    600px;

    border-left:

    1pxsolid#ccc;

    min-height:

    1116px;//IE7\FF

    height:

    100%;//IE6\IE7\FF这个很重要，IE6定死高度后，需要再加上这条，才能自动延伸。

    _height:

    1116px;//IE6

    }

    其他方法expression

    IE6支持最大高度解决CSS代码：

    .yangshi{max-height:

    1000px;_height:

    expression（（document.documentElement.clientHeight||document.body.clientHeight）<1000?

    "1000px":

    ""）;overflow:

    hidden;}

    说明：

    max-height:

    1000px;这个是IE6以上级其它品牌浏览器支持最大范围高度。

    而_height:

    expression（（document.documentElement.clientHeight||document.body.clientHeight）<1000?

    "1000px":

    ""）;overflow:

    hidden;则是让IE6支持max-height替代CSS代码，但效果和其它版本浏览器相同效果。

    让所有浏览器都支持max-height的CSS样式代码，完整：

    max-height:

    1000px;_height:

    expression（（document.documentElement.clientHeight||document.body.clientHeight）<1000?

    "1000px":

    ""）;overflow:

    hidden;这里的1000和1000px是你需要的数值，注意3个数值的相同。

    让IE6支持最大高度max-height的时候别忘记加上overflow:

    hidden; 

    ◆还有一种方法：

    在IE6IE5IE7FF测试竟然正常，而且能通过W3C检测的,方法如下:

    HTML代码 

    1.#test { min-height:

    100px; background:

    #BBB; _height:

    100px; overflow:

     visible; } 

    方法3利用!

    important

    1.　height:

    auto!

    important; 

    2.height:

    500px; 

    3.min-height:

    500px; 

     

    IE6不认识!

    important，比如border:

    20pxsolid#60A179!

    important;

    其余浏览器认识

    扩展框问题就是指：

    在IE6中，盒子指定了高或宽的时候，如果里面的内容过多，内容不会溢出，而是把盒子撑大。

    解决决扩展框问题的好办法是加一个overflow:

    hidden;，这里正好是用的IE6的这个BUG来实现在IE6里最小高度和超过最小高度自动适应的这个问题。

    12.页面的最小宽度min-width

    是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度这样就能保证排版一直正确。

    但IE不认得这个，而它实际上把width当做最小宽度来使。

    为了让这一命令在IE上也能用，可以把一个

    放到标签下，然后为div指定一个类：

    然后CSS这样设计：

    #container{min-width:

    600px;width:

    expression_r（document.body.clientWidth<600?

    "600px":

    "auto"）;}

    13解决display:

    inline-block间隙

    1\使用font-size:

    0

    类似下面的代码：

    .space{

    font-size:

    0;

    }

    .spacea{

    font-size:

    12px;

    }

    这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距（IE7等浏览器有时候会有1像素的间距）。

    不过有个浏览器，就是Chrome,其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加：

    类似下面的代码：

    .space{

    font-size:

    0;

    -webkit-text-size-adjust:

    none;

    }

    2\使用letter-spacing

    类似下面的代码：

    .space{

    letter-spacing:

    -3px;

    }

    .spacea{

    letter-spacing:

    0;

    }

    根据我去年的测试，该方法可以搞定基本上所有浏览器，不过Opera浏览器下有蛋疼的问题：

    最小间距1像素，然后，letter-

    举报
    举报     版权申诉
    版权申诉     word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
    配套讲稿：

    如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制：

    部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词：
    IE6 特有 bug 兼容性问题 整理
    提示  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
    关于本文
    本文标题：IE6特有bug兼容性问题整理.docx
    链接地址：https://www.bingdoc.com/p-18322225.html

    热门标签

    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2023 冰点文库 网站版权所有

    经营许可证编号:鄂ICP备19020893号-2


    收起
    在线客服
    意见反馈
    返回顶部
    展开
    QQ交谈
    返回顶部