zoukankan      html  css  js  c++  java
  • ie6下常见的bug 调整页面兼容性

    ie6下常见的bug

    我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜。我们需要了解ie6的一些常见bug,这样,更好的调试兼容性,下面小强老师就把一些常见的ie6bug列出来,大家去研究下。

    考虑结构的稳定性
    最常见的问题就是网页元素位置混乱,错位。

    1.1.1.DOCTYPE 必须有

    必需在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。
    <!DOCTYPE> 标记和浏览器的兼容性相关,删除<!DOCTYPE>,就是把如何展示HTML页面的权利交给浏览器,这 时,IE6,IE7,IE8,Firefox2,Firefox3,Chrome,有多少种浏览器,页面就有可能有多少中显示效果,这是不被允许的。

    1.1.2margin加倍的问题

    浮动  margin  但是可能会出现
    出现这个问题一般要同时满足两个条件:

    盒子要有浮动,在一个就是要要margin,符合这两个条件,一般在ie6下面会出现 双倍边距的问题。

    解决方法:

    _display:inline;

    1.1.3   IE6图片底侧会有像素间隙问题

    这个问题啊,再火狐浏览器,也可能出现哦!

    1将img标记与/div标记放在同一行
    <div><img src="images/jd.gif" /></div>
    但是这样写不太方便阅读,我们知道代码的可读性是最为重要的。
    所以建议用第二种方法
    2.在CSS样式中给img上设置display:block;属性,将图片设为块元素下面代码。
        img{display:block;}
    3.浮动

    1.1.4   IE6下元素最小高度的问题

    在IE6下面,如果想给把元素例如div设置成19像素左右以下的高度设置不了。这是因为IE6浏览器里面有个默认的高度
    iE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden  font-size:0; 
     

    1.1.5    ie6下面引起多余字符

      两个浮动的盒子之间加html注释 会引起多余字符的问题。
     解决方法:
    1. 删除注释
    2.如果可以不给指定宽度
     小强零零壹 http://www.xiaoqiang001.com
    3. 在文字最后面多打一个空格

    小强零零壹  http:www.xiaoqiang001.com
    4.给这个盒子加定位。
    .two{100px; float:left; position:relative;}

    1.1.6  IE6下文字混排浮动3像素间距BUG


    有时候,图片浮动后,文字环绕着有个3像素的距离。
    解决方法:
    _margin-right:-3px;

    1.1.7  IE6下li里底部3像素间距BUG

    如果li里面内容过于复杂,那么li和li之间就出现3像素白空隙。  很困扰哦

    解决方法:

     vertical-align: middle  bottom等

    1.1.8  IE6中奇数宽高的BUG

    我们尽量把盒子的高度和宽度设为偶数(定位的影响)

    1.1.9了解ie6盒子会撑高的特性

    内容有多大,盒子就撑多大
    其他浏览器也像ie6这样:height:auto!important; 高度自适应
    !important  为了提权  在所有里面它的权重最高。
    ie7及其以上的ie版本  还有非ie浏览器都能识别。

  • 相关阅读:
    PAT (Basic Level) Practise 1013 数素数
    PAT (Basic Level) Practise 1014 福尔摩斯的约会
    codeforces 814B.An express train to reveries 解题报告
    KMP算法
    rsync工具
    codeforces 777C.Alyona and Spreadsheet 解题报告
    codeforces 798C.Mike and gcd problem 解题报告
    nginx + tomcat多实例
    MongoDB副本集
    指针的艺术(转载)
  • 原文地址:https://www.cnblogs.com/xiaoqiang001/p/3861143.html
Copyright © 2011-2022 走看看