IE兼容性问题(二)

一：IE6下最小高度问题
当height<19px的时候会被当作19px来处理
解决办法：overflow:hidden

<style>
    *{margin:0px;padding:0px;}
    .box{height:2px;background:red;overflow:hidden}
</style>
<div class="box"></div>

二：IE6双边距bug
横向的margin值会被放大为两倍
解决方法：display:inline;

<style>
    *{margin:0px;padding:0px;}
    .box{width:200px;height:200px;background:red;float:left;
    margin:100px;display:inline;}
</style>
<div class="box"></div>

三：IE6，7下 li下边就会产生一个间距
解决办法：
1、给li添加 vertical-align:top
2、给li添加浮动

<style>
    *{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
    ul{width:}
    li{list-style:none;height:12px;border:1px solid red;
    /*vertical-align:top*/;float: left;}
    a{width:100px;height:12px;float:left;background:red;}
    span{width:100px;height:12px;float:right;background:blue;}
</style>
<ul>
            <li>
                <a href="#"></a>
                <span></span>
            </li>
            <li>
                <a href="#"></a>
                <span></span>
            </li>
            <li>
                <a href="#"></a>
                <span></span>
            </li>
            <li>
                <a href="#"></a>
                <span></span>
            </li>
            <li>
                <a href="#"></a>
                <span></span>
            </li>
        <ul>

四：IE6下的文字溢出
1.子元素的宽度和父元素的宽度相差小于3px的时候
2.两个浮动元素之间有注释或者行内元素的时候

解决办法：用div把注释和行内元素包裹起来

<style>
    *{margin:0px;padding:0px;}
    .box{width:400px;}
    .left{float:left;}
    .right{width:400px;float:right}
</style>
<div class="box">
            <div class="left"></div>
            <div>
                <!--IE6下的文字溢出-->
                <span></span><span></span><span></span><span></span><span></span><span></span>
             </div>
            <div class="right">花好久整理这些问题，头晕眼花，继续吧。。</div>
        </div>

五:绝对定位元素会消失
IE6下，当浮动元素和绝对定位元素是并列关系的时候，绝对定位元素会消失
解决办法：给定位元素外面包一个div

<style>
    *{margin:0px;padding:0px;}
    .box{width:200px;height:200px;
        border:1px solid #000;position:relative;}
    ul{width:150px; height:150px;background:red;
            float:left;margin:0 0 0 50px;}
    span{width:50px;height:50px;background:blue;
        position:absolute;right:-20px;top:0;}
        </style>
<div class="box">
    <ul></ul>
    <div><span></span></div>
</div>

六：IE6下，父元素用边框，子元素的margin会消失
解决办法：触发父元素的haslayout;

<style>
    *{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
    .box{background:red;border:1px solid red;zoom:1;
    /*padding:1px;*/}
    .div{width:200px;height:200px;background:blue;margin:100px}
</style>
<div class="box">
    <div class="div"></div>
</div>

七：IE6不支持固定定位 css没办法解决

<style>
    *{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
        .box{width:100px;height:100px;background:red;
        position:fixed;left:50px;top:100px;}
</style>
<div class="box"></div>

八：IE6 7下，输入类型的表单控件上下各有1px间隙
解决办法：给input加浮动

<style>
    *{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
    .box{width:200px;height:32px;border:1px solid red;  }
    input{width:100px;height:28px;padding:0;float:left;}
</style>
<div class="box">
    <input type="text"/>
</div>

九：IE6 7下，输入类型的表单控件加border:none没用
解决办法：1、border:0;2、给input添加背景颜色

<style>/*css样式表的衣柜*/
    *{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
    .box{width:200px;height:32px;border:1px solid red;  }
    input{width:100px;height:28px;padding:0;float:left;
        border:none;background:#fff;}
</style>
<div class="box">
    <input type="text"/>
</div>

十：IE6不支持 border:1px dotted ;
解决办法：切背景平铺