• 兼容性问题


    一 css盒模型在IE6下解析有问题,我们知道就width来说,一个块级元素的magin、padding、boder,width7个属性的宽度之和,应该等于其父级元素的内容区域(width),而我们一般设置宽度若是未达到其长度,浏览器就会重置margin-right的值,将之它们的和等于其值,当然若是我们为margin设置负值,那么元素的width可能超出其父元素。在标准下,width为padding所占区域,但是再ie6中设置width后,其真实width为所设width-其padding与border*2,我一般采用CSShack技术处理

    二、 IE6的双倍边距BUG,在块级元素浮动后本来外边距10px,但IE解释为20px,解决办法是加上display: inline ,

    1、问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。

    2、解决办法:当将其display属性设置为inline时问题就都解决了。

    三、说明:这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距 就会出现这种情况。
    也许你会问:“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”?

    因为浮动都有其相对应的对象,只有相对于其父对象的浮动 对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一个对象的,所以第二个对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline;才能达到预期效果。

    当然最坏的情况下,我们就可以使用”margin:10px 0 0 10px;*margin:10px 0 0 10px;_margin:10px 0 0 5px”,这种“标准属性;*IE7识别属性;_IE6识别属性”HACK方式解决

    3、总结:这个现象仅当块级对象设置了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。

    <div style=”200px;height:50px;background:#ccc;”>

    <div style=”100px; height:50px;float:left;margin-left:10px; background:#eee;”>

    </div>

    </div>

    margin双布局可以说是IE6下经典的bug之一。产生的条件是:block元素+浮动+margin。

    越少的浮动,就会越少的代码,会有更灵活的页面,会有扩展性更强的页面。浮动会用的较少。另外,也会避免使用浮动+margin的用法。所以,越后来越不易遇到这种bug。

    使用display:inline;可以解决这个问题。

    而为什么display:inline可以解决这个双边距bug,首先是inline元素或inline-block元素是不存在双边距问题的。然后,float:left等浮动属性可以让inline元素haslayout,会让inline元素表现得跟inline-block元素的特性一样, 支持高宽,垂直margin和padding等,所以div class的所有样式可以用在这个display inline的元素上。

    三、 IE6下图片下方有空隙产生;解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block,
    或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom都可以解决.(但是最近我发现这个问题在其它浏览器中也有所体现)

    四、 IE6 3px bug 两个浮动层中间有间隙,这个IE的3PX BUG也是经常出现的,
    解决的办法是给右边元素也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
    经典两列布局,float: left;200px; 第二个,margin-left,200px; 他们之间会产生3px的间距。

    五、 在IE6中没有min-width的概念,其默认width就是min-width,所以有时字体过多它会选择撑开容器。

    六、 IE6无法定义1px左右高度的容器,是因为默认的行高造成的,解决的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px

    七 使用margin : 0 auto;方法使容器居中依然在IE6中行不通,我们要对其父容器使用

    七 被点击访问过的超链接样式不在具有hover和active了, 解决方法是改变CSS属性的排列顺序: L-V-H-A <style type=”text/css”> a:link {} a:visited {} a:hover {} a:active {} /style>

    八 在使用绝对定位/相对定位时,设置z-index在ie中可能会失效,是因为其元素依赖于其父元素的z-index,而父元素默认为0 ?所以子元素z-index高,而父元素底,依然不会改变其显示顺序;

  • 相关阅读:
    iOS-微信分享多张图片(UIActivityViewController多图分享和多图分享失败)
    java jvm设置http代理参数
    TCP加速锐速SS(ServerSpeeder)破解版一键安装
    Rectified/无限流量/KVM/1G内存/亚洲优化/月付3.99刀起/商家首次续费优惠/91yun第600篇博文
    在Centos7上安装配置ss-libev Proxifier
    需要序列化的类中没有写serialVersionUID的解决办法
    湖南卫视直播
    修改postfix smtp端口,防止公网扫描浪费你的服务器流量
    亚马逊aws 一个实例双网卡-两个弹性ip设置
    智读App-免费下载付费知识节目攻略
  • 原文地址:https://www.cnblogs.com/zengjie123/p/4679049.html
Copyright © 2020-2023  润新知