• 兼容性问题的总结


    一、img标签会在IE浏览器里自动的添加border:所以在开始最好就加上属性img{border:0;};

    二、img在IE浏览器中会出现空白:添加display:block属性就可以解决;

    三、margin加倍的问题:设置为float的div在IE6下设置的margin会加倍(在IE7、8、9、10、11下不会)。这是一个ie6都存在的bug。

        解决方案是在这个div里面加上display:inline;例如: <div id=”imfloat”></div>相应的css为#IamFloat{float:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/} ;

    四、IE6支持min-width、max-width CSS样式属性(IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。    比如要设置背景图片,这个宽度是比较重要的。)

    1IE6支持max-width解决方法
    IE6支持最大宽度,解决CSS代码:
    .yangshi{

      max-1000px;

      _expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");

      overflow:hidden;

    }

    说明:max-1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而 _expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden; 则是让IE6支持max-width替代CSS代码,但效果和其它版本浏览器相同效果。

    让所有浏览器都支持max-width的CSS样式代码,完整:
    max-1000px;

    _expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");

    overflow:hidden;

    这里的1000和1000px是你需要的数值,注意3个数值的相同。

    设置最大max-width的时候别忘记加上overflow:hidden;

    2、IE6支持min-width解决方法
    IE6支持最小宽度,解决CSS代码:

    .yangshi{

      min-1000px;

      _expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");

    }

    说明:min-1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而 _expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":""); 则是让IE6支持min-width替代CSS代码,但效果和其它版本浏览器相同效果。

    让所有浏览器都支持min-width的CSS样式代码,完整:
    min-1000px;

    _expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");
    这里的1000和1000px是你需要的数值,注意3个数值的相同。

    3、让IE6支持min-width同时又支持max-width解决方法 
    让IE6即支持最小宽度又支持最大宽度限制设置。这种情况我们常常碰到对图片控制,让不确定大小的图片,如果太宽,不能超出一定范围值,小的时候不控制他的方法,用到CSS代码:

    _expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));


    对图片控制CSS完整代码:

    img{

      max-620px;

      _expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));

    }

    这里说明:图片不能超出大于620px的宽度,又不小于1像素的宽度。

    让所有浏览器包括IE6浏览器支持最大宽度又支持最小宽度DIV CSS代码:
    .yangshi{

      max-620px;

      min-1px;_expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));

    }

    五、【css】清除浮动的几种方式

    因为浮动框不在普通的文档流中,所以它不占据空间。如下面的代码:

    .news {

     background-color:gray;

     border:1px solid black;

    }

    .news img {

     float:left;

    }

    .news p {

     float:right;

    }

    <div class="news">

     <img src="/img/news-pic.jgp" alt="my pic" />

     <p>Some text</p>

    </div>

    但是因为浮动元素脱离了文档流,所以包围图片和文本的div不占据空间。如何让包围元素在视觉上包围浮动元素呢?需要在这儿元素的某个地方应用clear。可惜这个事例中没有元素可以清理,所以需在在最后一个段落下面添加一个空元素并清理它。

    即添加:

    .clear {clear:both}

    <div class="news">

     ...

     <br class="clear" />

    </div>

    这就是清理浮动的第一种方式,但是这个方式添加了添加了无意义的标记。

    第二种方式是不对浮动的文本和图像进行清理,而是选择浮动容器div:

    .news {

     background-color:gray;

     border:solid 1px black;

     float:left;

    }

    ...

    但是与div同级的元素会受到影响。

    第三种方式是利用overflow属性。应用值为hidden或auto的overflow属性有一个有用的副作用,这会自动清理包含的任何浮动元素:

    .news {

     background-color:gray;

     border:solid 1px black;

     overflow:hidden;

    }

    ...

    第四种方式,结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容:

    .clear:after {

     content:".";

     height:0;

     visibility:hidden;

     display:block;

     clear:both;

    }

    <div class="news clear">

     ...

    </div>

    这个方法在大多数现代浏览器中都是有效的,淘宝首页也用了这种方式来清除浮动,但是在IE6和更低版本中不起作用。

    IE6下需要以下hack:

    .clear {

     display:inline-block;

    }

    * html .clear {height:1%;}

    .clear {display:block;}

  • 相关阅读:
    锻造软件需求人员的六大要素
    一名IT从业者的英语口语能力成长路径
    软键盘android:windowSoftInputMode属性详解
    Linux CentOS下shell显示-bash-4.1$ 不显示用户名和主机名的解决方法
    Cent OS 常用 命令
    安装服务器pve虚拟系统(可以通过web管理物理机集群资源与虚拟机)
    win10系统绑定本地IP和mac地址
    苹果MAC OS查看MAC地址及修改ip
    CentOS7 配置阿里云yum源,vim编辑器,tab自动补全
    element的el-tabs控制,以及el-select 多选默认值
  • 原文地址:https://www.cnblogs.com/dabingguai/p/4350135.html
Copyright © 2020-2023  润新知