• 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浏览器都能识别。

  • 相关阅读:
    Flask 入门(十二)
    Flask 入门(特别篇)
    Flask 入门 (十一)
    Flask 入门(十)
    Flask 入门(九)
    [20171031]markhot.txt
    [20170927]关于hugepages.txt
    [20170927]hugepages与内核参数nr_overcommit_hugepages.txt
    [20170916]sqlplus set array最小2补充.txt
    [20170914]tnsnames.ora的管理.txt
  • 原文地址:https://www.cnblogs.com/xiaoqiang001/p/3861143.html
Copyright © 2020-2023  润新知