浮動與清浮動（三）：bug與hack

時間 2019-12-05

標籤浮動 bug hack 简体版

原文原文鏈接

因爲兼容性的問題，在使用float後會產生一些不可預期的小 bug，尤爲以 IE 早期版本（6/7）出現的 bug 較多。css

IE 雙邊距 bug

IE 雙邊距 bug ，看英文名一目瞭然：The IE5/6 Doubled Float-Margin Bug。指在 IE5/6中，塊級元素在添加float以後，當 margin-left/right != 0/auto 時，其實際顯示效果 margin left/right 會擴大一倍。
舉例來講：html

div {
		width: 200px;
		height: 100px;
	}
	.div1 {
		background-color: #ccc;
	}
	.div2 {
		background-color: #333;
		margin: 0 20px;
	}
	.div3 {
		background-color: #666;
		margin: 0 20px;
		float: left;
	}

<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>

在 IE6 中渲染效果以下：

能夠看出 div3 僅在添加 float: left以後，margin-left/right就增長了一倍。瀏覽器

解決方案是在 div3 中添加display:inline：spa

.div3 {
		display: inline;
	}

顯示以下：

這樣既解決了 IE6 下的雙邊距 bug，也不會對其餘瀏覽器及版本形成影響。.net

關於雙邊距問題的更多信息，能夠閱讀這篇文章：The IE5/6 Doubled Float-Margin Bugcode

IE6/7 li的4px間隙

li 的 4px 間隙問題是指：在 IE6/7 下，若是 list 元素中某個 li 內容中若是有浮動元素，那麼各個 li 之間會產生 4px 的間距。
舉例來講：
在不加浮動的狀況下，效果應該是這樣的：htm

.list li{
		list-style: none;
		padding: 0;
		margin: 0px;
		height: 50px;
		width: 200px;
		border: 1px solid #000;
	}

<ul class="list">
		<li><span>aaa</span></li>
		<li></li>
		<li></li>
	</ul>

IE6/7 渲染效果以下：
圖片

接下來，給 span 添加 float: left屬性，渲染效果以下：

結果發現，在第一個li和第二個li之間產生了4px的間隙，這就是所謂的4px間隙問題。get

解決方案以下：
給 li 標籤添加屬性：vertical-align: top，效果以下：
it

圖片下方的空隙

以下一段代碼：

<style type="text/css">
	img {
		width: 400px;
	}
	div {
		border: 5px solid #000;
		background-color: #ff0000;
		width: 600px;
	}
	</style>

<body>
	<div>
		<img src="girl.jpg" alt="">
	</div>
</body>

顯示效果以下：

能夠看出在圖片下方與 div 下邊框之間有 5px 的間距。

解決方案：給 img 添加 vertical-align: top的標籤。

IE6 最小高度的問題

IE6 下最小高度 = 16px。
解決方法是添加overflow: hidden。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。