Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时，浮动元素会展开为100％宽度。有解决方法吗？

本文介绍了Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时，浮动元素会展开为100％宽度。有解决方法吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我有一个父 div> 这里有一个解决方案，使 inline-block 在IE6上工作，如 http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ 使元素表现得更像右侧浮动< div> s ： <！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> < html xmlns =http://www.w3.org/1999/xhtmllang =enxml：lang =en> < head> < title> Float with inline-block test< / title> < style type =text / css> .container { border-top：solid 10px green; float：left; } .tester1， .tester2 { float：right; } .tester1 { border-top：solid 10px blue; } .tester2 { border-top：solid 10px purple; } < / style> <！ - [if lte IE 7]> < style type =text / css> .container { text-align：right; } .tester1， .tester2 { float：none; zoom：1; display：inline; / * display：inline-block;对于IE 7和6中的块级元素。请参见http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ * / } < ; / style> <！[endif] - > < / head> < body> < div class =container> < div class =tester1>测试员1< / div> < div class =tester2>测试员2< / div> < / div> < / body> < / html> I've got a parent div floated left, with two child divs that I need to float right.The parent div should (if I understand the spec correctly) be as wide as needed to contain the child divs, and this is how it behaves in Firefox et al.In IE, the parent div expands to 100% width. This seems to be an issue with floated elements that have children floated right. Test page:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Float test</title></head><body><div style="border-top:solid 10px #0c0;float:left;"> <div style="border-top:solid 10px #00c;float:right;">Tester 1</div> <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div></div></body></html>Unfortunately I can't fix the width of the child divs, so I can't set a fixed width on the parent.Is there a CSS-only workaround to make the parent div as wide as the child divs? 解决方案 Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <div>s:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Float with inline-block test</title><style type="text/css"> .container { border-top: solid 10px green; float: left; } .tester1, .tester2 { float: right; } .tester1 { border-top: solid 10px blue; } .tester2 { border-top: solid 10px purple; }</style></head><body><div class="container"> <div class="tester1">Tester 1</div> <div class="tester2">Tester 2</div></div></body></html> 这篇关于Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时，浮动元素会展开为100％宽度。有解决方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！