IE CSS Bug 系列

1.【IE CSS Bug系列】IE6&IE7图片链接无效

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7图片链接无效</title>
<style>
    html,body {
        padding: 0;
        margin: 0;
    }

    .m-box a { display: block; width: 270px; height: 129px; }
    .m-box a img { border: 0 none; }
    .m-box a span { *zoom: 1; }

    .m-fix a span { position: relative; z-index: -1; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：特定的嵌套(a>内联元素>img)</p>
<div class="m-box">
    <a href="#">
        <span>
            <img src="http://www.baidu.com/img/bdlogo.gif" alt="百度一下，你就知道"/>
        </span>
    </a>
</div>

<h2>BUG修复</h2>
<p>解决方案：给这个内联元素设置position: relative; z-index: -1;</p>
<div class="m-box m-fix">
    <a href="#">
        <span>
            <img src="http://www.baidu.com/img/bdlogo.gif" alt="百度一下，你就知道"/>
        </span>
    </a>
</div>
</body>
</html>
View Code

2.【IE CSS Bug系列】IE6&IE7里overflow的auto|hidden定位

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7里overflow的auto|hidden定位</title>
<style>
    html,body {
        padding: 0;
        margin: 0;
    }

    .m-box { width: 200px; height: 100px; background-color: red; overflow: auto; }
    .m-box .pos { position: relative; }

    .m-fix { *position: relative; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：父元素overflow:hidden | auto,子元素相对定位</p>
<div class="m-box">
    <div class="pos">
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
    </div>
</div>

<h2>BUG修复</h2>
<p>解决方案：给父元素设置position: relative;</p>
<div class="m-box m-fix">
    <div class="pos">
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
        我是相对定位<br />
    </div>
</div>
</body>
</html>
View Code

3.【IE CSS Bug系列】IE6&IE7表单双边距

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7表单双边距</title>
<style>
    html,body {
        margin: 0;
        padding: 0;
    }

    .m-box { width: 100%; margin-left: 100px; }

    .m-fix { *margin-left:0; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：IE6/IE7里表单父元素设置宽度和横向margin</p>
<div class="m-box">
    <input type="text" value="双边距"/>
    <textarea>双边距</textarea>
</div>

<h2>BUG修复</h2>
<p>解决方案：hack</p>
<div class="m-box m-fix">
    <input type="text" value="双边距"/>
    <textarea>双边距</textarea>
</div>
</body>
</html>
View Code

4.【IE CSS Bug系列】IE6&IE7里Li间隙

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7里Li间隙</title>
<style>
    html,body {
        padding: 0;
        margin: 0;
    }

    .m-box ul li { overflow: hidden; width: 100%; height: 24px; line-height: 24px; background-color: red; }
    .m-box ul li span {
        float: left;
    }

    .m-fix ul li {
        vertical-align: top;
    }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：li中浮动元素或者设置display:block</p>
<div class="m-box">
    <ul>
        <li>
            <span>li内元素浮动</span>
        </li>
        <li>
            <span>li内元素浮动</span>
            <span>li内元素浮动</span>
        </li>
    </ul>
</div>

<h2>BUG修复</h2>
<p>解决方案：给li设置vertical-align: top;</p>
<div class="m-box m-fix">
    <ul>
        <li>
            <span>li内元素浮动</span>
        </li>
        <li>
            <span>li内元素浮动</span>
            <span>li内元素浮动</span>
        </li>
    </ul>
</div>
</body>
</html>
View Code

5.【IE CSS Bug系列】IE6奇数宽定位1px

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6奇数宽定位1px</title>
<style>
    html,body {
        margin: 0;
        padding: 0;
    }

    .m-box { position: relative; width: 201px; height: 200px; background-color: red; }
    .m-box-inner { position: absolute; width: 20px; height: 20px; background-color: #000; top: 0; left: 200px;}

    .m-fix { width: 200px; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：IE6下定位的父元素宽度是奇数时</p>
<div class="m-box">
    <div class="m-box-inner"></div>
</div>

<h2>BUG修复</h2>
<p>解决方案：将定位的父元素宽度改为偶数</p>
<div class="m-fix m-box">
    <div class="m-box-inner"></div>
</div>
</body>
</html>
View Code

6.【IE CSS Bug系列】IE6浮动3px

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6浮动3px</title>
<style>
    html,body {
        padding: 0;
        margin: 0;
    }

    .m-box {
        overflow: hidden;
        background-color: #ccc;
    }
    .m-box .m-box-main { width: 200px; float: left; background-color: red;  }
    .m-fix .m-box-main { _margin-right: -3px;}
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：一个块浮动，另一个不浮动</p>
<div class="m-box">
    <div class="m-box-main">浮动3像素bug</div>
    <div>浮动3像素bug</div>
</div>

<h2>BUG修复</h2>
<p>解决方案：1.给浮动元素设置负margin; 2.给另一个元素也浮动</p>
<div class="m-box m-fix">
    <div class="m-box-main">浮动3像素bug</div>
    <div>浮动3像素bug</div>
</div>
</body>
</html>
View Code

7.【IE CSS Bug系列】IE6浮动元素相邻绝对定位消失

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE6浮动元素相邻绝对定位消失</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
        }

        .m-box {
            overflow: hidden;
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }

        .m-box .fl {
            float: left;
            width: 100%;
        }
        .m-box .pos {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            top: 0;
            left: 0;
        }

        .m-fix .pos { _clear: both; }
    </style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：浮动元素相邻绝对定位，并且浮动元素有宽 >= 盒子宽-2 </p>
<div class="m-box">
    <div class="fl">浮动元素</div>
    <div class="pos">定位</div>
</div>

<h2>BUG修复</h2>
<p>解决方案：给绝对定位设置clear: both;</p>
<div class="m-box m-fix">
    <div class="fl">浮动元素</div>
    <div class="pos">定位</div>
</div>
</body>
</html>
View Code

8.【IE CSS Bug系列】 IE6浮动双边距

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6浮动双边距</title>
<style>
    html,body {
        padding: 0;
        margin: 0;
    }
    .g-clear { clear: both; }

    .m-box {overflow: hidden;}
    .m-box p { float: left; background-color: red; margin-left: 100px; }

    .m-fix p { _display: inline; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：IE6里块级元素浮动时设置横向margin</p>
<div class="m-box">
    <p>双边距</p>
    <p>双边距</p>
</div>

<h2 class="g-clear">BUG修复</h2>
<p>解决方案：给浮动元素设置display:inline</p>
<div class="m-box m-fix">
    <p>双边距</p>
    <p>双边距</p>
</div>
</body>
</html>
View Code

9.【IE CSS Bug系列】IE6浮动注释

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE6浮动注释</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
        }

        .m-box { overflow: hidden; width: 200px; }
        .m-box .list { float: left; width: 100px; background-color: #ccc; }

        .m-fix { width: 203px; }
    </style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：盒子里的浮动元素中间有注释，并且盒子的宽度 >= 浮动元素宽+2</p>
<div class="m-box">
    <div class="list">浮动+注释</div>
    <!-- 注释 -->
    <div class="list">浮动+注释</div>
</div>

<h2>BUG修复</h2>
<p>解决方案：1.去除浮动元素之间的注释; 2.给盒子的宽的增加2像素以上(不推荐)</p>
<div class="m-box m-fix">
    <div class="list">浮动+注释</div>
    <!-- 注释 -->
    <div class="list">浮动+注释</div>
</div>
</body>
</html>
View Code

10.【IE CSS Bug系列】IE6滤镜PNG透明，容器内链接

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE6滤镜PNG透明，容器内链接</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
        }

        .m-box {
            width: 100px;
            height: 100px;
            background: url(x.png) no-repeat 0 0;

            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png', sizingMethod='crop');
        }

        .m-fix a {
            _position: relative;
        }
    </style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：IE6滤镜PNG透明</p>
<div class="m-box">
    <a href="#">滤镜透明后链接</a>
</div>

<h2>BUG修复</h2>
<p>解决方案：给这个链接设置position: relative;</p>
<div class="m-box m-fix">
    <a href="#">滤镜透明后链接</a>
</div>
</body>
</html>
View Code

11.【IE CSS Bug系列】IE6绝对定位bottom失效

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE6绝对定位bottom失效</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
        }

        .m-box { position: relative; }
        .m-box .cont { width: 200px; height: 200px; background-color: #ccc; }
        .m-box .pos { position: absolute; width: 50px; height: 50px; left: 0; bottom: 0; background-color: red; }

        .m-fix { width: 200px; }
    </style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：绝对定位时，相对定位的父元素没有触发haslayout</p>
<div class="m-box">
    <div class="cont"></div>
    <div class="pos">bug</div>
</div>

<h2>BUG修复</h2>
<p>解决方案：触发haslayout</p>
<div class="m-box m-fix">
    <div class="cont"></div>
    <div class="pos">fix</div>
</div>
</body>
</html>
View Code

12.【IE CSS Bug系列】IE6里定义小高度容器

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE6里定义小高度容器</title>
    <style>
        html,body {
            margin: 0;
            padding: 0;
        }

        .m-box p { height: 5px; background-color: red; }

        .m-fix .overflow { overflow: hidden; }
        .m-fix .fontSize { font-size: 0; }
        .m-fix .lineHeight { line-height: 0; }
        .m-fix .empty { line-height: 0 }
    </style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：默认</p>
<div class="m-box">
    <p></p>
    <p>最小高度</p>
    <p>最小高度</p>
    <p>最小高度</p>
</div>

<h2>BUG修复</h2>
<p>解
    class="m-box m-fix">
<p class="overflow">最小高度</p>
<p class="fontSize">最小高度</p>
<p class="lineHeight">最小高度</p>
<p class="empty"></p>
</div>
</body>
</html>
View Code

13.【IE CSS Bug系列】图片标签焦点问题

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签焦点问题</title>
<style>
html,body { margin: 0; padding: 0; }
h2 { clear: both; } /* 清浮动，无关的样式 */

.m-box label { float: left; }
.m-fix label {
    position: relative;
    overflow: hidden;
}
.m-fix label span {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;/* 宽高要盖住图片 */
    height: 200px;
    background: url(http://www.baidu.com/img/bdlogo.gif) no-repeat -5000px; /* required for IE click bug fix */
}
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：label嵌套img焦点触发</p>
<div class="m-box">
    <label for="default"><img src="http://www.baidu.com/img/bdlogo.gif" alt="百度一下"/></label>
    <input type="checkbox" id="default">
</div>

<h2>BUG修复</h2>
<p>解决方案：给label添加span并且定位</p>
<div class="m-box m-fix">
    <label for="fix"><span></span><img src="http://www.baidu.com/img/bdlogo.gif" alt="百度一下"/></label>
    <input type="checkbox" id="fix">
</div>
</body>
</html>
View Code

14.【IE CSS Bug系列】IE8按钮对齐

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE8按钮对齐</title>
<style>
    html,body {
        margin: 0;
        padding: 0;
    }
    button, input{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: auto;
    }

    .m-fix button, .m-fix input{
        width: 20em;
    }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：button/input[type=submit]/input[type=button]</p>
<div class="m-box">
    <button>按钮</button>
    <input type="button" value="button"/>
    <input type="submit" value="button"/>
</div>

<h2>BUG修复</h2>
<p>解决方案：定宽</p>
<div class="m-box m-fix">
    <button>按钮</button>
    <input type="button" value="button"/>
    <input type="submit" value="button"/>
</div>
</body>
</html>
View Code

15.【IE CSS Bug系列】IE6&IE7浮动+清浮动内容折断

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7浮动+清浮动内容折断</title>
<style>
    html,body {
        margin: 0;
        padding: 0;
    }
    h2 { clear: both; } /* 清浮动，无关的 */

    .m-box p {
        border: 1px solid red;
        clear: left;
        float: left;
    }
    .m-fix p { width: 100%; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：浮动+清浮动</p>
<div class="m-box">
    <p>hi,我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！</p>
    <p>hi,我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！</p>
</div>

<h2>BUG修复</h2>
<p>解决方案：设置宽度</p>
<div class="m-box m-fix">
    <p>hi,我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！</p>
    <p>hi,我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！</p>
</div>
</body>
</html>
View Code

 

posted @ 2014-03-13 13:33  小七丶  阅读(1104)  评论(6)  编辑  收藏  举报