zoukankan      html  css  js  c++  java
  • IE6下面的浮动问题

    第一个问题:

      在IE6下面overflow:hidden;失效

         原因:在IE6/7中子级设置position:relative;属性值后,导致父级的overflow:hidden;失效。

              与定位的层级关系有关,IE6/7解析为内容已经跳出文档流,以致父级误以为没有包含内容。

        http://img.dnbcw.info/2010912/129287605451128007.png

           解决方案: 对于IE6可以为父级添加定位属性纠正问题,但IE7依然无效。

    第二个问题:

       在IE6下overflow起了position:relative的作用

       http://img.dnbcw.info/2010912/129287605456108292.png

       分析:在怪异模式与标准模式下的页面对CSS的解析会有一定的差异甚至是扭曲了其属性的作用,

                对这现象暂时还没有冲破的能力,也只能记录与回避了。

    第三个问题:

         在IE6中,子级元素绝对定位于父级元素时,当动态改变父级宽高时,子级位置没有发生变化。

       http://img.dnbcw.info/2010912/129287605460368536.png

        估计是动态改变父级宽度时,IE6并没有实时对浏览器渲染。暂时没有CSS能解决这问题,

        但可尝试使用JS对改变改模块高度进行刷新解决这问题。

    第四个问题:

        IE6中position:relative;属性值无效

        在IE6及以下版本,父级元素已设置position:relative;子级绝对定位元素没有生效。

        原因在于父级元素没有触发haslayout(相关资料请搜索On having layout),IE7及以上的高级浏览器则不存在这问题。

        解决方案:在父级元素中添加让其触发haslayout的CSS属性值。

    第五个问题:

        奇数引起定位的1px BUG

            在IE6及以下版本,父级元素宽度高度为奇数时,子级元素绝对定位于(right:0;bottom:0;),会出现往内偏移1px的错误。

        http://img.dnbcw.info/2010912/129287605469509058.png

        可以观察到左上角的子级元素显示正常,其原因为“盒子”拉伸扩展为上至下左至右,估计于此以至靠左边或顶部的位置不会发生移动的变化。

     

  • 相关阅读:
    AcWing 1135. 新年好 图论 枚举
    uva 10196 将军 模拟
    LeetCode 120. 三角形最小路径和 dp
    LeetCode 350. 两个数组的交集 II 哈希
    LeetCode 174. 地下城游戏 dp
    LeetCode 面试题 16.11.. 跳水板 模拟
    LeetCode 112. 路径总和 递归 树的遍历
    AcWing 1129. 热浪 spfa
    Thymeleaf Javascript 取值
    Thymeleaf Javascript 取值
  • 原文地址:https://www.cnblogs.com/jsingleegg/p/3456079.html
Copyright © 2011-2022 走看看