一些 tumblr 帖子在自定义主题上没有正确显示

问题描述

我是这个网站的新手，如有任何错误，请见谅。我在 Tumblr 上制作主题，但我遇到了 certain kinds 的 posts 没有正确显示在主题本身内的问题。正如您从帖子中看到的，图片根本没有加载。

我认为我的主题中的照片集可能有问题，但摆弄这些没有任何作用。老实说，我是 HTML 和 CSS 的新手，所以我不确定从哪里开始。任何帮助，将不胜感激。这是我认为可能是问题的 CSS/HTML 部分。

.media{
margin:0 0 10px 0;
}

iframe,img,embed,object,video {
   max-width: 100%;
}

img {
   height: auto;
   width: auto;
}

这里是 HTML

{block:Photo}
<center><div class="media">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/></div></center>{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="media">{Photoset}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

如果有帮助，我将使用 Animecharacter 的基本主题作为代码的构建块。

解决方法

看起来 css position: absolute 导致图像从文档流中移除，并且没有设置任何高度或宽度属性。

在 style 标签内的主题底部（通常在末尾）。

.post-content div.npf_row .npf_col figure img,.post div.npf_row .npf_col figure img,body div.npf_row .npf_col figure img {
   position: static;
}

请参阅附加的屏幕截图，其中我禁用了位置属性。

如果这不起作用，您可以通过执行以下操作来覆盖外部样式表中的属性：

.post-content div.npf_row .npf_col figure img,body div.npf_row .npf_col figure img {
   position: static !important;
}

但这不是那么优先，最好在模板中的哪个阶段找到应用并在该块之后编写 css（如果可能）