多层边框代码在不同浏览器的兼容性问题
由于浏览器的兼容性问题，HTML代码 cellspacing 在 chrome 浏览器里是无法得到正确显示的。
今天我终于找到了一套既能在IE浏览器又可以在chrome浏览器一样显示多层边框的代码。消除了用多层table制作的帖子时只能用IE浏览器才可正确显示的遗憾。
其实解决这问题的原理和方法十分简单，简述如下：
由于table里的cellsapcing在chrome 浏览器里无效，因此编辑代码时把所有cellspacing、cellpadding 一律设为0；然后在每个<td>里设定style="padding:□□px"取代cellspacing的参数。
例如以下的八层边框的代码，按过去一般做法，在每个table里都设定了cellspacing：
|
<center>
<div style="width:800px" align="center">
<table style="border:#c9b049 2px groove" cellspacing="4" cellpadding="0" background="http://img3.oldkids.cn/u ... 16444.jpg" width="100%" align="center">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="3" cellpadding="0" background="http://img2.oldkids.cn/u ... 83785.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="4" cellpadding="0" background="http://img3.oldkids.cn/u ... 16444.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="36" cellpadding="0" background="http://img1.oldkids.cn/u ... 40536.gif" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="4" cellpadding="0" background="http://img3.oldkids.cn/u ... 16444.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="3" cellpadding="0" background="http://img2.oldkids.cn/u ... 83785.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="4" cellpadding="0" background="http://img3.oldkids.cn/u ... 16444.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img1.oldkids.cn/u ... 27180.jpg" width="100%">
<tbody>
<tr>
<td>
<div style="filter:shadow (color=#000000, strength=20);width:100%;font-weight:bold;font-size:60pt;color:#c9b049;line-height:150%;font-style:normal;font-family:SimHei" align=center>大 标 题</div><br>
<p style="padding-left:20px; padding-right:20px" align=left><span style="line-height:150%;font-family:kaiti_GB2312;font-size:24px;color:#DFC026;font-weight:bold">文字开始……。</span></p><br>
<p align=center><img src="http://img1.oldkids.cn/u ... lt;/p><br>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</div></center><br><br>
|
结果在chrome 浏览器里显示的效果变成：
取消了cellspacing，在每个<td>里设定style="padding:□□px"后，不管在IE或在chrome 浏览器里都一样显示出多层边框的效果。
更改后的代码：
|
<center>
<div style="width:800px" align="center">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img3.oldkids.cn/u ... 16444.jpg" width="100%" align="center">
<tbody>
<tr>
<td style="padding:4px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img2.oldkids.cn/u ... 83785.jpg" width="100%">
<tbody>
<tr>
<td style="padding:3px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img3.oldkids.cn/u ... 16444.jpg" width="100%">
<tbody>
<tr>
<td style="padding:4px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img1.oldkids.cn/u ... 40536.gif" width="100%">
<tbody>
<tr>
<td style="padding:36px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img3.oldkids.cn/u ... 16444.jpg" width="100%">
<tbody>
<tr>
<td style="padding:4px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img2.oldkids.cn/u ... 83785.jpg" width="100%">
<tbody>
<tr>
<td style="padding:3px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img3.oldkids.cn/u ... 16444.jpg" width="100%">
<tbody>
<tr>
<td style="padding:4px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img1.oldkids.cn/u ... 27180.jpg" width="100%">
<tbody>
<tr>
<td style="padding:20px">
<div style="filter:shadow (color=#000000, strength=20);width:100%;font-weight:bold;font-size:60pt;color:#c9b049;line-height:150%;font-style:normal;font-family:SimHei" align=center>大 标 题</div><br>
<p align=left><span style="line-height:150%;font-family:kaiti_GB2312;font-size:24px;color:#DFC026;font-weight:bold">文字开始……。</span></p><br>
<p align=center><img src="http://img1.oldkids.cn/u ... lt;/p><br>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</div></center><br><br>
|
[
本帖最後由 rainbow 於 2015-10-24 12:11 編輯 ]
