今天制作网页时遇到一个兼容性问题。我制作了个一行一列的表格。想让里面的图片自动换行，每行显示1幅图片。就像淘宝产品详细页面的排版，于是我建表如下：
<table align="center" border="0" width="715">
<tbody>
 <tr>
 <td height="33" style="border-bottom: #ccc 1px solid" valign="bottom"><span style="font-weight: bold">产品说明</span>：</td>
 </tr>
 <tr>
 <td><br />
 <img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /><img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /><img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /></td>
 </tr>
</tbody>
</table>

产品说明：

结果在谷歌，360，火狐浏览器上都没问题，都是每行一个图片，图片自动换行。但是在IE浏览器上就不能自动换行，所有图片都是一横排显示。但是在<td> 上添加<div>自动换行的CSS样式也没用，如下：
<table align="center" border="0" width="715">
<tbody>
 <tr>
 <td height="33" style="border-bottom: #ccc 1px solid" valign="bottom"><span style="font-weight: bold">产品说明</span>：</td>
 </tr>
 <tr>
 <td style="word-wrap: break-word; word-break: normal"><br />
 <img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /><img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /><img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /></td>
 </tr>
</tbody>
</table>

产品说明：

实在没办法了，只好使出最后的招数了。表格内完全用div+css。于是设计了如下效果：
<table align="center" border="0" width="715">
<tbody>
 <tr>
 <td height="33" style="border-bottom: #ccc 1px solid" valign="bottom"><span style="font-weight: bold">产品说明</span>：</td>
 </tr>
 <tr>
 <td><br />
 <div style="width: 305px; word-wrap: break-word; word-break: normal"><img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /><img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /><img src="https://www.jm3q.com/uploadfile/2013/1006/20131006043054193.png" /></div>
 </td>
 </tr>
</tbody>
</table>

产品说明：

结果所有浏览器都显示正常，每行一张图片，再多的图片也会自动换行了。这样就方便后台多图上传了。
金猫建站总结：Table与Div是相互相成的。

上一篇：表格中的td通过js来显示和隐藏，解决在谷歌中colspan不兼容性
下一篇：解决z-index与position:absolute同时使用时在IE浏览器下失效的方法