表格或div层在网页中被撑破的解决方法

转自： http://www.bclele.com/show-2-36.html

作者: 乐乐 日期: 2008-11-21 16:49:31

在制作留言本及博客栏目时，最终效果基本满意后。。。测试时吓坏我了。。表格被一些英文字母撑破了。极度难看。。郁闷一下。对CSS不怎么熟 悉。一时不知解决方法。。也没有想到百度。。或许当时做得太入神了。。可巧。。QQ 群里刚好有网友在问同样的问题。。嘿嘿，真是雪中送炭！生怕自己忘记 了。把图载了下来。。
只需在CSS里定义： table-layout:fixed;word-wrap:break-word就可以实现了。。防止表格被撑开。。还不知道的朋友可以试试。。

下面是更多的解决方法提供参考：

一、直接在网页里设置图片大小，比如代码： <img src=http://www.bclele.com/logo.gif  width="600" height="500" border="0">，这样虽然可以限制了图片大小，但是需要在上传图片之前手动修改图片大小，否则上传的图片就会变形。或者会出现模糊的现象。。（乐乐提示：不推荐使用此方法[个人认为]） 

二、使用javascript，代码如下： <img ="http://www.bclele.com /logo.gif" οnlοad="javascript:if(this.height>108){this.resized=true;this.style.height=108;if(this.width>87){this.resized=true;this.style.width=87;}}"> 

Onload：为网页被加载时执行这段JS。。。是一个事件。。
（用JS对图片的宽度进行限制。。不过当图片还没在服务器里下载下来时（也就是当网络速度绶慢的时候）图片依然会撑开表格。。 

 

 

这种方法会在调用图片的时候，自动按比例缩小到指定的宽度，不会引起图片的变形，并且也不会撑破表格，但是缺点是，如果图片太大，在图片下载过程中，也就是图片显示过程中，会先以图片原大小显示，这时就会撑破表格，页面很难看，二当图片完全显示后，图片又会自动缩小。 

三、我们可以针对表格的属性来限制大小防止被撑开，比如在  

table { table-layout: fixed; word-wrap:break-word; }

四、用css控制图片自适应大小，代码如： 

img { max-width: 600px;  width:expression(this.width > 600 ? "600px" : this.width); overflow:hidden; }

其中 max-width:600px; 在IE7、FireFox等其他非IE浏览器下最大宽度为600px，但在IE6中无 效；width:600px; 在所有浏览器中图片的大小为600px，当图片大小大于600px，自动缩小为600px，在IE6中有效； 而 overflow:hidden;  指将超出设置大小的部分隐藏，避免控制图片大小失败而引起的表格撑开变形。 

五、最后总结一下最实用的代码： 

 

如果是表格，请用：

table { table-layout: fixed; word-break: break-all; }

 

如果是div层，请用： 

 

div { table-layout: fixed; word-wrap: break-word; width: 加上宽度; overflow: hidden;    (让多出来的不显示。)    }