css浮动的ie7兼容问题，下边距增加

言葉i 2016-02-27 02:27:01

大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>

...全文

164 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

bearteam11 2016-03-01

打赏
举报

not_float 的margin-bottom出问题，增加一个向左浮动float:left;

天际的海浪 2016-02-27

打赏
举报



.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;}