Maison >interface Web >tutoriel HTML >css浮动的ie7兼容问题，下边距增加_html/css_WEB-ITnose
css浮动的ie7兼容问题，下边距增加_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:24:131339parcourir
大box内左右浮动两个box，左侧box内有黄色部分（不浮动）和下方左右浮动的两个蓝色部分。
在IE7下，大box下方似乎多了一个padding-bottom的距离，现在要求内部所有部分高度是自动的。
正常情况下：
ie7下：
不使用的方法：
1、黄色部分也浮动；//因为右侧黄色box有时内部也有复杂的内容布局，不能做到全部浮动
2、ie7hack；
3、固定高度；
那么还有高明的什么方法呢？
代码如下
<style>*{ margin:0; padding:0;}li{ list-style:none;}.fix{zoom:1;}.fix:after{content:""; display:block; clear:both; height:0; visibility:hidden;}.box{ width:400px; margin:0 auto; border:1px solid #f69; margin-bottom:20px; margin-top:50px;}.box_left{ width:260px; float:left;}.box_right{ width:120px; float:right; background:#FFC;}.not_float{ width:100%; height:40px; margin-bottom:20px; background:#FFC;}.ready_float_left{ width:160px; float:left; background:#09f; color:#fff;}.ready_float_right{ width:80px; float:right; background:#09f; color:#fff;}.box2{ width:400px; height:100px; margin:0 auto; border:1px solid #f69;}</style></head><body><div class="box fix"> <div class="box_left"> <div class="not_float"> </div> <div class="ready_float_left"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="ready_float_right"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div> <div class="box_right"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div></div><div class="box2"></div>
回复讨论(解决方案)
.not_float{ width:100%; height:40px; background:#FFC;}.ready_float_left{ width:160px; float:left; margin-top:20px; background:#09f; color:#fff;}.ready_float_right{ width:80px; float:right; margin-top:20px; background:#09f; color:#fff;} not_float 的margin-bottom出问题，增加一个向左浮动float:left;
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：CSS轮廓outline_html/css_WEB-ITnoseArticle suivant：后端程序员前端之路03HTML语义化_html/css_WEB-ITnose