HTML5的！doctype弄亂了我的樣式

Question

我目前正在開發一些簡單的圖片庫，該圖片應顯示固定大小為148px的縮略圖。

當我在文件的開頭指定<!doctype html>時，它弄亂了我的樣式，因此看起來像這張照片。

它應該看起來如何

如果沒有這一行（我想瀏覽器將在HTML4模式下工作），它看起來是正確的：

實際上看起來很熱

自己看看文件： http : //ablage.stabentheiner.de/2013-08-10_gallery.html

新文件版本： http : //ablage.stabentheiner.de/2013-08-10_gallery2.html相同文件，但文檔類型不同： http : //ablage.stabentheiner.de/2013-08-10_gallery2_html4.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Gallerie</title>
<base target="Hauptframe">
<style>
body {
    background-color: #CCFFCC;
    background-image:url(../background.gif);
}
table {
    border:none;
    border-spacing:0;
}
img {
    border:none;
}
A:hover {
    color: #FF0000; 
    font-weight: bold
}
.imagefloat {
    border: medium solid #FFF;
    float: left;
    margin-top: 0px;
    margin-right: 16px;
    margin-bottom: 20px;
    margin-left: 0px;
}
.nowrap {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: 16px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.nowrapline2 {
    font-size: 12px;
}
.nowrapline3 {
    font-size: 10px;
}
.error {
    font-weight: bold;
    color: #F00;
}
.caption_cell {
    background-color: #FFF;
    width: 148px;
    height: 80px;
}
</style>
</head>

<body>


<div class="imagefloat">
    <table>
        <tr>
            <td><a href=""><img src="http://placehold.it/148x148" width="148" height="148" alt=""></a></td>
        </tr>
        <tr class="caption_cell">
            <td>

            <p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p><p class="nowrap nowrapline3">Copyright</p>
        </td>
        </tr>
    </table>
</div>


<div class="imagefloat">
    <table>
        <tr>
            <td><a href=""><img src="http://placehold.it/148x148" width="148" height="148" alt=""></a></td>
        </tr>
        <tr class="caption_cell">
            <td>

            <p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p>
        </td>
        </tr>
    </table>
</div>

</body>

Answer 1

好的，這里的問題很簡單：您沒有使用有效的HTML5。 您應該始終檢查的第一件事是，您的代碼將驗證格式正確的HTML ，而您的代碼則不會。 之后，還要檢查您的CSS。 但是請注意，如果問題是您的網站在HTML4模式下比HTML5模式下顯示的更好，那不是bug，這意味着您在編寫代碼時做錯了什么。

您的第一步是修復W3C驗證程序指出的所有故障。 如果那不能解決問題，請再看一下CSS。

Answer 2

解決方案很簡單。 默認情況下，圖像被視為嵌入式對象。 對於內聯渲染，通常需要在行之間具有最小的垂直間距，並且瀏覽器會添加此間距以提高可讀性。 要消除此額外間隙，請嘗試對這些圖像應用“顯示：阻止”。

HTML5的！doctype弄亂了我的樣式

問題描述

2 個解決方案

解決方案1
1 2013-08-10 15:10:11

解決方案2
1 已采納 2013-11-12 18:53:49

HTML5的！doctype弄亂了我的樣式

問題描述

2 個解決方案

解決方案1 1 2013-08-10 15:10:11

解決方案2 1 已采納 2013-11-12 18:53:49

解決方案1
1 2013-08-10 15:10:11

解決方案2
1 已采納 2013-11-12 18:53:49