IE7下浮動元素的內容自動換行的BUG解決方法

時間 2019-12-13

標籤 ie7 浮動元素內容自動換行 bug 解決方法欄目瀏覽器简体版

原文原文鏈接

有時候咱們想寫個浮動獲得這樣的效果：css

代碼：html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
*{margin:0;
padding:0;}
a{
	text-decoration:none;
	color:#333333;
	line-height:1.7em;}
.main_c{
	list-style:none;
	font-size:14px;
	width:400px;
	height:50px;}
.main_c li{
	float:left;
	margin-right:10px;
	}
</style>
</head>

<body>
<ul class="main_c">
<span style="white-space:pre">	</span><li><a href="#">豪門替身：總裁別囂張</a></li>
<span style="white-space:pre">	</span><li>|</li>
<span style="white-space:pre">	</span><li><a href="#">蠻荒征戰:惟我稱王</a></li>
<span style="white-space:pre">	</span><li>|</li>
<span style="white-space:pre">	</span><li><a href="#">毒婦重生：懲惡妹鬥渣男</a></li>
<span style="white-space:pre">	</span><li>|</li>
<span style="white-space:pre">	</span><li><a href="#">最強兵王：個人靠山最硬</a></li></ul>
</body>
</html>

但是在IE7和IE6下獲得的結果倒是這樣的：

解決辦法很簡單，給li標籤加一個white-space屬性便可：瀏覽器

<span style="font-size:18px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
*{margin:0;
padding:0;}
a{
	text-decoration:none;
	color:#333333;
	line-height:1.7em;}
.main_c{
	list-style:none;
	font-size:14px;
	width:400px;
	height:50px;}
.main_c li{
	float:left;
	margin-right:10px;
	white-space:nowrap;}
</style>
</head>

<body>
<ul class="main_c">
<span style="white-space:pre">	</span><li><a href="#">豪門替身：總裁別囂張</a></li>
<span style="white-space:pre">	</span><li>|</li>
<span style="white-space:pre">	</span><li><a href="#">蠻荒征戰:惟我稱王</a></li>
<span style="white-space:pre">	</span><li>|</li>
<span style="white-space:pre">	</span><li><a href="#">毒婦重生：懲惡妹鬥渣男</a></li>
<span style="white-space:pre">	</span><li>|</li>
<span style="white-space:pre">	</span><li><a href="#">最強兵王：個人靠山最硬</a></li></ul>
</body>
</html>
</span>

white-space：設置如何處理元素內的空白spa

可能的值

值	描述
normal	默認。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行爲方式相似 HTML 中的 <pre> 標籤。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。
pre-wrap	保留空白符序列，可是正常地進行換行。
pre-line	合併空白符序列，可是保留換行符。
inherit	規定應該從父元素繼承 white-space 屬性的值。

相關標籤/搜索

每日一句

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