-2
我有在Chrome與此頁的問題： http://www.pieterdedecker.be/index.htm爲什麼Chrome不能正確渲染此頁面？
對於那些你沒有瀏覽器，這裏發生了什麼： Chrome screenshot http://img39.imageshack.us/img39/241/chromeerr.jpg
我怎樣才能解決這個故障？
A
回答
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，任何人都可以隨意改進。
0
我認爲你碰到了empty cell glitch in Chrome，我沒有在你的頁面上測試過，但我在我的網站上看到過這個相同的問題。嘗試在您的TD中放入 或單個像素圖像。
0
這是一個已知的bug，其中的背景是由表格單元格繼承...
您必須對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');
}
0
檢查：
table.wrapper td.spacer
貌似寬度不正確呈現。它也不會在IE8中渲染。
0
嘗試在您的table.wrapper tr.body規則集中添加background-repeat: no-repeat;聲明。
0
該問題是由td繼承父tr的背景引起的。
table.wrapper td.content {
vertical-align: top;
/*background-color: #EEEEEE;*/
}
儘量減少你的表格佈局必要的修改，你可能只是你的間隔移動到「網格」表，然後從刪除合併單元格= 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>;
相關問題
- 1. 爲什麼幻像不能正確渲染頁面？
- 2. 爲什麼SIFR在Chrome中將此頁面渲染爲空白頁面？
- 3. 不正確的頁面渲染
- 4. 爲什麼IE7不能正確顯示此頁面？
- 5. 棘輪組件爲什麼不能正確渲染
- 6. 爲什麼RichFaces 4組件不能正確渲染？
- 7. 爲什麼這個骨幹視圖不能正確渲染？
- 8. 爲什麼HTML標籤在Symfony 1.4中不能正確渲染？
- 9. 爲什麼angular2無線電模塊不能正確渲染？
- 10. 爲什麼IE6不能正確渲染這個邊框？
- 11. 爲什麼我的遊戲不能正確渲染？
- 12. Css不能正確渲染
- 13. URL路由不能正確渲染所謂的頁面
- 14. 頁面在Heroku上不能正確渲染
- 15. 部分頁面不能正確渲染css類
- 16. PHP頁面沒有正確渲染
- 17. 頁面在IE7中正確渲染
- 18. 爲什麼chrome渲染字體如此明亮？
- 19. 不正確渲染
- 20. 爲什麼我的rich：dataTable不能渲染？
- 21. 爲什麼IE8不能渲染？
- 22. 移動Safari和移動Chrome上的網頁渲染不正確
- 23. 在渲染頁面中渲染頁面
- 24. 爲什麼Node.js不能正確解析下面的頁面？
- 25. 爲什麼不NoMatch渲染
- 26. 這爲什麼不渲染？
- 27. 爲什麼這個button_to在Rails 3.2.11中渲染不正確？
- 28. 爲什麼Apache Batik Rasterizer渲染TrueType字體不正確？
- 29. 爲什麼我的嵌入字體渲染不正確？
- 30. 爲什麼PHP渲染這個圖像不正確？
投一些代碼，而不是事先知情同意 – Sarfraz 2010-02-07 17:01:53
和PIC當然很好，但表現出一定的代碼太 – Sarfraz 2010-02-07 17:02:15
我不想被討厭的，但把文字圖像時沒有提供考慮到可訪問性，文本回退（即alt-tags或使用文本縮進的隱藏文本：-9999px）是非常糟糕的做法。 – 2010-02-08 16:27:08