（一）
一段HTML代码：
<div class="box">
<span>您好!</span>
<span>您好,这是完整不能换行!</span>
<span>您好，但是box宽的不够宽时，每项能自动换行!</span>
<span>你好，项内文件超长时不能换行!</span>
<span>您好，且不能覆盖重叠下一项!</span>
</div>
要求显示效果如下：
在IE8，chrome，firefox下很容易实现。
.box{
width:100%;
height:auto;
}
.box span{
float:left;
line-height:20px;
height:20px;
border:1px solid red;
margin:3px 3px 0px 0px;
}
但是在IE7模式下效果如下：
ie7下，为了填充满box的宽度。在剩余宽度内增加了一个span。但剩余宽度又不足以容下所有内容。只有换行。但因为该span起始位置已经固定。只能在此位置下向下拓展。
因为高度已经设定。多出的文本似乎挤出到外面去了。此时调整宽度后，可能会和第2行的span重叠起来。如下：
我们再看看IE的quirks诡异模式。此模式近似ie7，但会忽略span的高度设定。自动把行高自动调整为内容适应的高度。
新span会在此高度之后换行。这样就不会重叠在一起了。
此时只需要在.box span中增加一个white-space: nowrap;设定不换行。ie7和怪异模式也都会在剩余空间无法容纳span项全部内容时项自动换行了。
此时样式基本做到跨所有主流浏览器（其他微小细节与本文无关 暂忽略）。
（二）
但是，假如第3个span标签内容增加一个强制换行符，修改为如下时：
<span>您好，但是box宽的不够宽时，<br />每项能自动换行!</span>
我们希望的效果浏览器能支持span内强制换行，但同时内容不能被新的span覆盖。
ie-quirks模式效果：
ie7，ie8，chrome效果接近如下
为了使各浏览器都满足ie-quirks模式效果。我们需要调整。.box span中的的heigh样式
height:auto;
此时所有浏览器效果几乎一致了。
（三）
此时我们需要把父div的边框显示出来。修改了样式
.box{
width:100%;
height:auto;
border:1px solid gray;
padding:2px;
}我们希望看到的效果是（ie-quirks模式，ie7显示效果如下）：
但是在ie8，chrome模式下我们看到的效果确是：
为了满足如上要求。我们需要使用一个新的标签来清除浮动。只有这样 在ie8，chrome等新浏览器下，box才会自动计算真实的高度。
否则box的高度为0。修改html代码如下
<div class="box">
<span>您好!</span>
<span>您好,这是完整不能换行!</span>
<span>您好，但是box宽的不够宽时，每项能自动换行!</span>
<span>你好，项内文件超长时不能换行!</span>
<span>您好，且不能覆盖重叠下一项!</span>
<div style="clear:both;"></div>
</div>（四）
可是面试官告诉我们。你不能动HTML代码。你只有修改CSS样式的权限（以前百度空间。。。等博客不是都有这样的限制么，现在不知道是否还是如此）
没有办法了吗？还是有的。
我们把父元素box 样式中 增加一个浮动。 所有的浏览器在不修改HTML情况下也都能正常显示box的边框了。
.box{
width:100%;
height:auto;
border:1px solid gray;
padding:2px;
float: left;
}
（五）
可是新问题来了。 父元素box使用了浮动，会影响和他同级的其他元素的显示呢？能不能不修改父元素的浮动属性解决此问题呢。
我们增加一个after伪元素样式。在box后面通过样式添加一个block元素（否则无效），然后设置清楚浮动。详细CSS代码如下：
.box:after
{
content:"";
display:block;
clear:both;
}并且在html最顶部增加显示DOCTYPE声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
至此iequirks模式,ie7,ie8,chrome,firefox等浏览器都兼容了。
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.box{
width:100%;
height:auto;
border:1px solid gray;
padding:2px;
}
.box span{
float:left;
line-height:20px;
height:auto;
border:1px solid red;
margin:3px 3px 0px 0px;
white-space: nowrap;
}
.box:after
{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="box">
<span>您好!</span>
<span>您好,这是完整不能换行!</span>
<span>您好，但是box宽的不够宽时，每项能自动换行!</span>
<span>你好，项内文件超长时不能换行!</span>
<span>您好，且不能覆盖重叠下一项!</span>
</div>
</body>
</html>
（六）
解决了所有问题了吗？应该没有。还有很多细节存在细微出入，要兼容各种浏览器，要做的事情还很多。
可能要需要各种hack方法，或者通过js帮助了。后会有期吧。