IE7下浮动元素的内容自动换行的BUG解决方法

最新推荐文章于 2018-11-23 19:17:55 发布

转载最新推荐文章于 2018-11-23 19:17:55 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/buwan/p/5346095.html

本文介绍了一种解决IE6和IE7浏览器中浮动布局显示异常的方法，通过为li标签添加white-space: nowrap属性，实现了预期的水平布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候我们想写个浮动得到这样的效果：

代码：

<!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：设置如何处理元素内的空白

可能的值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。