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

Question

我是这个网站的新手，对于任何错误，我们深表歉意。我在 Tumblr 上制作主题，但遇到 certain kinds of 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 的基本主题作为我的代码的构建块。

Answer 1

看起来 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, 
.post div.npf_row .npf_col figure img, 
body div.npf_row .npf_col figure img {
   position: static !important;
}

但这不太优先，最好在您的模板中找到应用的阶段，然后在该块之后写下您的 css（如果可能的话）

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

Some tumblr posts not showing up properly on custom theme

html

css

tumblr

tumblr-themes

tumblr-html