尝试在IE6中为具有固定高度的div清除float时出现问题

时间:2011-10-07 09:00:11

标签: css internet-explorer-6

我有一个div需要有一个固定的高度,并且将有浮动或非浮动的内容。我在Firefox和Safari中没有问题,但是开始遇到问题IE6.Im使用溢出:隐藏到清除浮动但内容在IE6中被剪切,所以我用zoom来触发hasLayout属性。浮动在IE 6中被清除但我需要容器有一个固定的高度,如果我为容器指定一个固定的高度内容被剪掉了。是否可以拥有一个可以拥有固定高度的div容器,并且还有溢出:隐藏以清除浮动?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    #boxContent{background:red;min-height:425px;height:auto !important;height:425px;overflow:hidden;zoom: 1;}
    #box1{background:yellow;float:left;width:50%}
    #box2{background:green;float:left;width:50%}
    </style>

</head>
<body>
    <div id="boxContent">
        <div id="box1">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat scelerisque purus nec elementum. Maecenas tempus sollicitudin tincidunt. Integer tincidunt volutpat ullamcorper. Etiam laoreet tincidunt nunc, sit amet venenatis est rhoncus vel. Aenean enim dui, blandit eget egestas blandit, blandit id purus. Curabitur non tortor neque, et ornare elit. Mauris at nisi turpis. Vivamus tempus, enim quis posuere laoreet, elit est varius tellus, vel faucibus nunc enim vel lacus. Sed semper feugiat nisi sit amet pulvinar. Duis mattis cursus nunc vel volutpat. Etiam ornare mollis leo ac mattis.
                Cras sagittis mauris mi, et pellentesque arcu. Phasellus aliquet nisi sed tortor dictum faucibus. Morbi facilisis pretium lorem, in cursus augue fringilla eu. Morbi felis lectus, commodo at fermentum eget, varius at sem. Aenean dapibus lacus eu orci mollis porttitor. Curabitur nec purus quis risus imperdiet malesuada. Suspendisse potenti. In ipsum lorem, molestie ac sollicitudin at, dignissim eget est. Curabitur arcu eros, accumsan et pretium dignissim, pellentesque eget mi. In fringilla neque pharetra leo imperdiet ut dictum odio hendrerit. Etiam ligula nisl, feugiat vel mattis vel, pulvinar vitae dui.
                Cras felis massa, porttitor sed bibendum at, vestibulum in nisi. Nulla egestas hendrerit felis, accumsan imperdiet tellus commodo id. Maecenas tincidunt justo ut erat porta et faucibus ante dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida tristique tristique. Etiam non dolor mi, id eleifend odio. Sed cursus nisl ut enim dictum adipiscing sed volutpat lacus. Quisque ut quam felis, quis vulputate velit. Fusce consequat, metus sed vulputate ultricies, leo leo tempor elit, vitae fringilla odio orci id leo. Sed nec neque nisl, eu fermentum arcu. Nunc facilisis scelerisque ipsum dictum feugiat. In hac habitasse platea dictumst. Pellentesque et nisl lacus, nec vulputate turpis. Nulla volutpat faucibus arcu et dapibus. Integer in erat libero, quis dignissim magna. Mauris metus felis, suscipit in euismod at, congue quis libero.
                Vestibulum volutpat aliquet ligula commodo dignissim. Donec laoreet quam et massa consequat scelerisque viverra turpis tincidunt. Morbi quis leo lacus, at porttitor nunc. Fusce fermentum elementum felis id viverra. Sed semper varius convallis. Duis quam lorem, facilisis id consequat in, commodo eget diam. Curabitur dolor elit, volutpat id tincidunt vel, rutrum eu arcu. Fusce scelerisque gravida porttitor. Duis accumsan porttitor fermentum. Integer fringilla tincidunt ipsum, sed condimentum diam consequat in. Maecenas malesuada lacinia nisi, eu condimentum lectus molestie pretium. Sed quam nisi, blandit non pretium in, luctus id quam. Morbi ac feugiat orci. In ac convallis ipsum. 
            </p>
        </div>
        <div id="box2">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat scelerisque purus nec elementum. Maecenas tempus sollicitudin tincidunt. Integer tincidunt volutpat ullamcorper. Etiam laoreet tincidunt nunc, sit amet venenatis est rhoncus vel. Aenean enim dui, blandit eget egestas blandit, blandit id purus. Curabitur non tortor neque, et ornare elit. Mauris at nisi turpis. Vivamus tempus, enim quis posuere laoreet, elit est varius tellus, vel faucibus nunc enim vel lacus. Sed semper feugiat nisi sit amet pulvinar. Duis mattis cursus nunc vel volutpat. Etiam ornare mollis leo ac mattis.
                Cras sagittis mauris mi, et pellentesque arcu. Phasellus aliquet nisi sed tortor dictum faucibus. Morbi facilisis pretium lorem, in cursus augue fringilla eu. Morbi felis lectus, commodo at fermentum eget, varius at sem. Aenean dapibus lacus eu orci mollis porttitor. Curabitur nec purus quis risus imperdiet malesuada. Suspendisse potenti. In ipsum lorem, molestie ac sollicitudin at, dignissim eget est. Curabitur arcu eros, accumsan et pretium dignissim, pellentesque eget mi. In fringilla neque pharetra leo imperdiet ut dictum odio hendrerit. Etiam ligula nisl, feugiat vel mattis vel, pulvinar vitae dui.
                Cras felis massa, porttitor sed bibendum at, vestibulum in nisi. Nulla egestas hendrerit felis, accumsan imperdiet tellus commodo id. Maecenas tincidunt justo ut erat porta et faucibus ante dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida tristique tristique. Etiam non dolor mi, id eleifend odio. Sed cursus nisl ut enim dictum adipiscing sed volutpat lacus. Quisque ut quam felis, quis vulputate velit. Fusce consequat, metus sed vulputate ultricies, leo leo tempor elit, vitae fringilla odio orci id leo. Sed nec neque nisl, eu fermentum arcu. Nunc facilisis scelerisque ipsum dictum feugiat. In hac habitasse platea dictumst. Pellentesque et nisl lacus, nec vulputate turpis. Nulla volutpat faucibus arcu et dapibus. Integer in erat libero, quis dignissim magna. Mauris metus felis, suscipit in euismod at, congue quis libero.
                Vestibulum volutpat aliquet ligula commodo dignissim. Donec laoreet quam et massa consequat scelerisque viverra turpis tincidunt. Morbi quis leo lacus, at porttitor nunc. Fusce fermentum elementum felis id viverra. Sed semper varius convallis. Duis quam lorem, facilisis id consequat in, commodo eget diam. Curabitur dolor elit, volutpat id tincidunt vel, rutrum eu arcu. Fusce scelerisque gravida porttitor. Duis accumsan porttitor fermentum. Integer fringilla tincidunt ipsum, sed condimentum diam consequat in. Maecenas malesuada lacinia nisi, eu condimentum lectus molestie pretium. Sed quam nisi, blandit non pretium in, luctus id quam. Morbi ac feugiat orci. In ac convallis ipsum. 
            </p>
        </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/hLwy8/10/

http://jsfiddle.net/hLwy8/11/

溢出:隐藏的黑客在ie6中不起作用!

你需要陈旧的风格:两者;在容器的末尾

相关问题