IE6 7BUG 负边距断层

weixin_30410999

于 2013-06-18 15:18:00 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/amws/p/3142359.html

本文介绍了一个在IE67浏览器中遇到的布局问题，即内层设置了负边距后被外层元素截断。通过分析问题原因，提出了解决方案，即去除外层的布局触发属性，并使用padding替代原有的宽度设置，从而避免了元素被截断的问题。

BUG 描述

内层设置了负的边距，在IE6 7 下内层就被外层截断了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<meta name="robots" content="noindex">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Disappearing List Background Bug Demo - hasLayout.net by Zoffix Znet</title>

<style type="text/css">

body {
    background: #fff;
    color: #000;
}
#ds {
width: 5em;
height: 5em;
background: #005566;
}
#container {
    width: 80%; /* width gives layout */
    background: #FF00FF;
}
    #inner {
        margin: -4em 2em 0;/*  negative margin is used */
        background: #FF0000;

    }
</style>
<div id="ds"></div>
<div id="container">
这有一个层
    <div id="inner">
        I am cut off<br>
        Text<br>
        More text<br>
    </div>
</div>