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 属性的值。