zoukankan      html  css  js  c++  java
  • IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08)

    一、IE6/IE7下margin-bottom失效兼容解决办法

    1、用padding-bottom代替;
    2、在父标签中加入overflow:hidden;或zoom:100%
    示例代码:

    不正常显示

    ul{}

    li{ list-style:none; float:left; margin:10px;}

    1、 你会发现左边10px 变成20px了,

    解决办法:在li的CSS中加入:display:inline 即可;

    2、还有下面的边距没有生效:margin-bottom 没有生效

    解决办法:在CSS父级元素中加入 overflow:hidden 或是 zoom:100%即可

    正常显示

    ul{overflow:hidden;margin:10px;}

    li{ list-style:none; float:left; margin-right:10px;display:inline;} //此时显示正常

    /*此时margin-bottom有效,overflow与zoom任意加一个都可以*/
    其实:margin-top可在里层写,而margin-bottom要在效果的最外层。否则在ie7没效果。ie6,8可以有。

    IE扩展框问题 浮动下降 IE6双倍边距 图片下空隙 层间隙 对齐文本 FF撑开高度

    图文混排容易导致扩展框问题.

    <div><img src="images/index_1.jpg" />扩展框问题</div>
    这样排版容易导致扩展框问题.
    尽量定义宽高给定值 * 浮动下降问题
    加上{float:left;} 即可```

    IE6 的双倍边距BUG
    解决办法是加上display:inline

    IE6 下为什么图片下方有空隙产生
    解决这个BUG 的方法也有很多,可以是改变html 的排版,或者设置img 为display:block
    或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决.


    IE6 下这两个层中间怎么有间隙
    这个IE 的3PX BUG 也是经常出现的,解决的办法是给.right 也同样浮动float:left 或者相对IE6 定义.left
    如何对齐文本与文本输入筐
    遇到此种问题,设置文本框的vertical-align:middle 就可以了


    为什么FF 下文本无法撑开容器的高度
    标准浏览器中固定高度值的容器是不会象IE6 里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height 设置min-height:200px; 这里为了照顾不认识
    min-height 的IE6 可以这样定义:
    {
    height:auto!important;
    height:200px;
    min-height:200px;
    }

  • 相关阅读:
    通过json动态创建控制器
    记一次bug解决!改变思路解决问题的同时,还需要弄明白是什么原因。
    __proto__,prototype,constructor
    事件:compositionstart & compositionend,解决oninput获取到拼音的问题。
    事件绑定----阻止冒泡失效
    预装的win10系统如何恢复
    rem.js
    vscode 使用 github仓库
    nginx使用
    伸缩盒
  • 原文地址:https://www.cnblogs.com/ferron/p/4529818.html
Copyright © 2011-2022 走看看