日期:2014-05-17  浏览次数:20718 次

css div 换行问题

这是我页面的几个div

<div class="top1"><div class="top1-1">
<div class="top1-1a">用户名:</div>
<div class="top1-1b"><input type="text" id="username" name="username" class="bd1"></div>
<div class="top1-1a">密 码:</div>
<div class="top1-1b"><input type="password" id="password" name="password" class="bd1"></div>
<div class="top1-1c"><input type="image" src="images/top-02.gif"></div>
</div></div>
这是几个css
.top1{ width:948px; border:solid 1px #EBEBEB; height:29px;word-break:break-all;}
.top1-1{ height:27px; background-image:url(http://i0.cnfolimg.com/uploads/v5.0/gold/top-01.gif); margin:1px; padding:0px 8px 0px 10px;}
.top1-1a{ float:left; padding:7px 0px 0px 0px; text-align:left;}
.top1-1b{ float:left; padding:3px 10px 0px 0px; text-align:left; width:110px;}
.top1-1c{ float:left; padding:3px 10px 0px 0px; text-align:left;}
.top1-1d{ float:right; padding:7px 0px 0px 0px; text-align:left;}

在ie6下div换成了几行在其他浏览器是正确的在同一行显示,
那位高手帮忙看一下,谢了

------解决方案--------------------
问题原因是css不兼容造成的。

word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

你是要在一行显示,还是要换行显示?

------解决方案--------------------
主要问题是word-break:break-all;
由IE创造,CSS3草案支持。

对于新版非IE浏览器可以尝试加入厂商前缀来尝试是否支持这个“新”规则。
如:
-moz-word-break:break-all;
-webkit-word-break:break-all;