我在Chrome中遇到此页面的问题： http://www.pieterdedecker.be/index.htm
对于那些没有Chrome的人来说，会发生以下情况： Chrome screenshot http://img39.imageshack.us/img39/241/chromeerr.jpg
我该如何修复这个故障？
答案 0 :(得分：1)
这是一个可以正确呈现的替代方案，并且维护的代码要少得多：
CSS：
body {
margin: 0;
padding: 0;
}
a:link, a:hover, a:active, a:visited {
color: #3D566E;
}
#wrapper {
width: 800px;
height: 500px;
padding: 0;
margin: 0 auto;
border-collapse: collapse;
}
#top {
background: url('img/wrap_top.jpg');
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
height: 300px;
}
#bodywrap {
padding: 10px 20px 0 30px;
background: url('img/wrap_body.png');
}
#bottom {
padding: 15px 20px 5px 30px;
background: url('img/wrap_bottom.png');
background-repeat: no-repeat;
color: #4d4d4d;
font-family: Arial;
font-size: 80%;
text-align: left;
}
table.grid {
width: 100%;
}
/* Grid thumbnails */
table.grid a:link img, table.grid a:visited img, table.grid a:active img {
width: 100px;
height: 100px;
border: 3px solid #bbbbbb;
}
table.grid a:hover img {
width: 100px;
height: 100px;
border: 3px solid #0075b5;
}
/* Exception for grid descriptor: see below */
table.grid tr td {
text-align: center;
}
/* Grid descriptor */
table.grid tr td.grid_descriptor {
text-align: left;
vertical-align: top;
padding-left: 5px;
padding-top: 0px;
}
table.grid tr td.grid_descriptor h1 {
color: black;
font-size: 130%;
font-family: Arial;
margin-top: 0px;
}
table.grid tr td.grid_descriptor p {
color: black;
font-size: 80%;
font-family: Arial;
}
span.language {
padding: 5px;
background-color: #4d4d4d;
color: white;
font-weight: bold;
text-align: center;
vertical-align: center;
}
这是第一个身体<script>标记之前的身体替换：
<div id="wrapper">
<div id="top"></div>
<div id="bodywrap">
<table class="grid">
<tbody>
<tr>
<td><a href="http://www.cybernetnews.com/author/pdedecker/"><img src="./Pieter De Decker's website_files/cybernetnews.jpg" onmouseover="showDescription('CyberNet News', 'Experiencing Facebook overkill? Looking for a one-click solution to make your photos look better?<br /><br />In my occassional contributions to CyberNet News, I show you how to make your digital life easier and more fun.<br /><br />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="CyberNet News" /></a></td>
<td><a href="http://www.pieterdedecker.be/beradio/"><img src="./Pieter De Decker's website_files/beradio.jpg" onmouseover="showDescription('beRadio', 'This piece of software bundles popular Belgian radio stations in one app.<br /><br />Added bonus: song information for most stations.<br /><br />\x3Ci>Software, built with C#\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span> \x3Cspan class=\'language\'>NL\x3C/span>');" onmouseout="revertDescription();" alt="beRadio" /></a></td>
<td><a href="http://www.pieterdedecker.be/dvbt/"><img src="./Pieter De Decker's website_files/dvbt.jpg" onmouseover="showDescription('The Belgian DVB-T Resource', 'The missing manual to receiving free over-the-air television in Belgium.\x3Cbr />\x3Cbr />\x3Ci>Website, built with HTML/JS/CSS\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="The Belgian DVB-T Resource" /></a></td>
<td><a href="http://www.pieterdedecker.be/ipodcalsync/"><img src="./Pieter De Decker's website_files/ipodcalsync.jpg" onmouseover="showDescription('iPodCALsync', 'A tool that lets iPod owners sync their Google calendars with their device.\x3Cbr />\x3Cbr />\x3Ci>Software, built with AutoItScript\x3Cbr />Not for the iPhone/iPod touch\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="iPodCALsync" /></a></td>
<td class="grid_descriptor" rowspan="2" style="width: 30%">
<h1 id="descriptor_title">Pick a thumbnail</h1>
<p id="descriptor_body">Hover over a thumbnail to find out more about my projects.</p>
</td>
</tr>
<tr>
<td><a href="http://labs.pieterdedecker.be/blog/"><img src="./Pieter De Decker's website_files/softwarelabo.jpg" onmouseover="showDescription('Pieter\'s Software Lab', 'See what I\'ve been cooking up in the labs. Has sneak peaks on new software and sites I may or may not release later.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>NL\x3C/span>');" onmouseout="revertDescription();" alt="Pieter's Software Lab" /></a></td>
<td><a href="http://www.twitter.com/pdedecker"><img src="./Pieter De Decker's website_files/twitter.jpg" onmouseover="showDescription('My Twitter', 'My latest thoughts on tech, the world and bubble wrap.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="My Twitter" /></a></td>
<td><a href="http://www.pieterdedecker.be/podcast/itsallmellow/"><img src="./Pieter De Decker's website_files/itsallmellow.jpg" onmouseover="showDescription('It\'s All Mellow', 'A podcast that features cheery and moody music to warm up your inner self.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="It's All Mellow" /></a></td>
<td><a href="javascript:;"><img src="./Pieter De Decker's website_files/empty.png" alt="Coming soon?" /></a></td>
</tr>
</tbody>
</table>
</div>
<div id="bottom">
Fascinated by the cat? You can find its owner <a href="http://www.flickr.com/photos/afu007/2398217277/" target="_blank">here</a>. An up-to-date browser such as <a href="http://www.getfirefox.com/" target="_blank">Firefox 3.5</a> or <a href="http://www.microsoft.com/netherlands/windows/internet-explorer/" target="_blank">Internet Explorer 8</a> ensures the site is rendered correctly. We're <a href="http://validator.w3.org/check?uri=referer" target="_blank">compliant</a> with international web standards.
</div>
</div>
这是解决问题的一个相当大的变化，但只是向您展示了更少的HTML / CSS选项，但仍然符合XHTML标准。这是wiki，其他任何人都可以随意改进。
答案 1 :(得分：0)
我认为你遇到了empty cell glitch in Chrome，我没有在你的网页上测试过，但我之前在我的网站上看到了同样的问题。尝试在TD中放置或使用单个像素图像。
答案 2 :(得分：0)
这是一个已知的错误，其中背景由表格单元继承......
您必须不使用tr上的背景图片，而是使用td上的背景图片。
所以你的代码是
<tr class="body">
<td class="spacer"></td>
<td class="content">....</td>
<td class="spacer"></td>
</tr>
必须改为
<tr class="body">
<td class="spacer left"></td>
<td class="content center">....</td>
<td class="spacer right"></td>
</tr>
并在CSS中添加
table.wrapper .body td{
background-image: url('img/wrap_body.png');
background-repeat:repeat-y;
}
table.wrapper .body td.left{ background-position: 0 0; }
table.wrapper .body td.center{ background-position: 50% 0; }
table.wrapper .body td.right{ background-position: 100% 0; }
并更改
table.wrapper tr.body, table.wrapper tr.bodyspacer {
background: url('img/wrap_body.png');
}
到
table.wrapper tr.bodyspacer {
background: url('img/wrap_body.png');
}
答案 3 :(得分：0)
检查你的：
table.wrapper td.spacer
看起来宽度无法正确渲染。它也不能在IE8中渲染。
答案 4 :(得分：0)
尝试在background-repeat: no-repeat;规则集中添加table.wrapper tr.body声明。
答案 5 :(得分：0)
问题是由td继承父tr的背景引起的。如果您在此处关闭背景颜色，这一点会更明显：
table.wrapper td.content {
vertical-align: top;
/*background-color: #EEEEEE;*/
}
为了最大限度地减少对表格布局的必要更改，您可以将间隔符移动到“网格”表格，并从其他行的单元格中删除colspan = 3声明：
<tr class="body">
<!--td class="spacer"> </td-->
<td class="content">
<table class="grid">
<tr>
<td class="spacer"> </td>
<td><a href="http://www.cybernetnews.com/author/pdedecker/"><img src="img/thumbs/cybernetnews.jpg" onmouseover="showDescription('CyberNet News', 'Experiencing Facebook overkill? Looking for a one-click solution to make your photos look better?<br /><br />In my occassional contributions to CyberNet News, I show you how to make your digital life easier and more fun.<br /><br />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="CyberNet News" /></a></td>
<td><a href="http://www.pieterdedecker.be/beradio/"><img src="img/thumbs/beradio.jpg" onmouseover="showDescription('beRadio', 'This piece of software bundles popular Belgian radio stations in one app.<br /><br />Added bonus: song information for most stations.<br /><br />\x3Ci>Software, built with C#\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span> \x3Cspan class=\'language\'>NL\x3C/span>');" onmouseout="revertDescription();" alt="beRadio" /></a></td>
<td><a href="http://www.pieterdedecker.be/dvbt/"><img src="img/thumbs/dvbt.jpg" onmouseover="showDescription('The Belgian DVB-T Resource', 'The missing manual to receiving free over-the-air television in Belgium.\x3Cbr />\x3Cbr />\x3Ci>Website, built with HTML/JS/CSS\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="The Belgian DVB-T Resource" /></a></td>
<td><a href="http://www.pieterdedecker.be/ipodcalsync/"><img src="img/thumbs/ipodcalsync.jpg" onmouseover="showDescription('iPodCALsync', 'A tool that lets iPod owners sync their Google calendars with their device.\x3Cbr />\x3Cbr />\x3Ci>Software, built with AutoItScript\x3Cbr />Not for the iPhone/iPod touch\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="iPodCALsync" /></a></td>
<td class="grid_descriptor" rowspan="2" style="width: 30%"><h1 id="descriptor_title"></h1><p id="descriptor_body"></p></td>
<td class="spacer"> </td>
</tr>
<tr>
<td class="spacer"> </td>
<td><a href="http://labs.pieterdedecker.be/blog/"><img src="img/thumbs/softwarelabo.jpg" onmouseover="showDescription('Pieter\'s Software Lab', 'See what I\'ve been cooking up in the labs. Has sneak peaks on new software and sites I may or may not release later.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>NL\x3C/span>');" onmouseout="revertDescription();" alt="Pieter's Software Lab" /></a></td>
<td><a href="http://www.twitter.com/pdedecker"><img src="img/thumbs/twitter.jpg" onmouseover="showDescription('My Twitter', 'My latest thoughts on tech, the world and bubble wrap.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="My Twitter" /></a></td>
<td><a href="http://www.pieterdedecker.be/podcast/itsallmellow/"><img src="img/thumbs/itsallmellow.jpg" onmouseover="showDescription('It\'s All Mellow', 'A podcast that features cheery and moody music to warm up your inner self.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="It's All Mellow" /></a></td>
<td><a href="javascript:;"><img src="img/thumbs/empty.png" alt="Coming soon?" /></a></td>
<td class="spacer"> </td>
</tr>
</table>
</td>
<!--td class="spacer"> </td-->
</tr>;