1

我目前正在制作一些简单的画廊，它应该显示固定大小为 148 像素的缩略图。

当我<!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>
4

2 回答 2

1

好的，您的问题很简单：您没有使用有效的 HTML5。您应该始终检查的第一件事是您的代码验证为格式正确的 HTML，而您的代码没有。之后，也要检查你的 CSS；但请注意，如果问题是您的网站在 HTML4 模式下比在 HTML5 模式下显示得更好，那么这不是错误，这意味着您在编写代码时做错了。

您的第一步是修复 W3C 验证器指出的所有故障；如果这不能解决问题，那么再看看你的 CSS。

于 2013-08-10T15:10:11.610 回答
1

解决方案很简单。默认情况下，图像作为内联对象处理。对于内联渲染，通常需要行之间的最小垂直间隙，这是由浏览器添加以提高可读性。要删除此额外间隙，请尝试对这些图像应用“显示：块”。

于 2013-11-12T18:53:49.943 回答