老校友 - Powered by Discuz! Board

免費論壇

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

分享

標題: 多层边框代码在不同浏览器的兼容性问题 [打印本頁]

作者: rainbow 時間: 2015-10-24 12:09 標題: 多层边框代码在不同浏览器的兼容性问题

本帖最後由 rainbow 於 2015-10-24 12:10 編輯

多层边框代码在不同浏览器的兼容性问题

由于浏览器的兼容性问题，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/upload/260790000/u260787417/2015/01/18/blog_20150118182558816444.jpg" width="100%" align="center">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="3" cellpadding="0" background="http://img2.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558983785.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="4" cellpadding="0" background="http://img3.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558816444.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="36" cellpadding="0" background="http://img1.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182559040536.gif" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="4" cellpadding="0" background="http://img3.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558816444.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="3" cellpadding="0" background="http://img2.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558983785.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="4" cellpadding="0" background="http://img3.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558816444.jpg" width="100%">
<tbody>
<tr>
<td>
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img1.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182559127180.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/upload/260775000/u260773777/2011/11/06/blog_20111106065335951227.gif"></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/upload/260790000/u260787417/2015/01/18/blog_20150118182558816444.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/upload/260790000/u260787417/2015/01/18/blog_20150118182558983785.jpg" width="100%">
<tbody>
<tr>
<td style="padding:3px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img3.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558816444.jpg" width="100%">
<tbody>
<tr>
<td style="padding:4px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img1.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182559040536.gif" width="100%">
<tbody>
<tr>
<td style="padding:36px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img3.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558816444.jpg" width="100%">
<tbody>
<tr>
<td style="padding:4px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img2.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558983785.jpg" width="100%">
<tbody>
<tr>
<td style="padding:3px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img3.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182558816444.jpg" width="100%">
<tbody>
<tr>
<td style="padding:4px">
<table style="border:#c9b049 2px groove" cellspacing="0" cellpadding="0" background="http://img1.oldkids.cn/upload/260790000/u260787417/2015/01/18/blog_20150118182559127180.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/upload/260775000/u260773777/2011/11/06/blog_20111106065335951227.gif"></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>

歡迎光臨老校友 (http://boanson.orzweb.net/)

Powered by Discuz! 7.2