响应类将iFrame高度设置为0，导致不显示图像

Question

在做一个项目的时候，我发现我在Tumblr上的一些图片没有显示。我发现的唯一线索是，在responsiverlevel -1类(见下面的html代码)中，iFrame的高度被设置为0。如果我在Chrome中弹出一个开发控制台并将其设置为，例如1632(而不是0)，则会出现图像。我使用一个主题(砖主题/主题花园)，但我能够编辑html和css。我可以修改我的css和/或HTML来解决这个问题吗?这个问题会出现在不同的设备平台上(台式机/手机/平板电脑)。

不显示图像的例子- http://deligrossery.com/post/149661412746/gawad-deli-grocery-207-hart-st-brooklyn-ny

对应CSS文件:responsive.css: http://static.tumblr.com/eftyn9y/kc0og8vio/responsive.cssstyle.css: static.tumblr.com/3zmswwt/Fmkmwgp8e/style.css(^我不能发布超过2个链接，直到我的声誉至少是10/添加一个https://到style.css)。

<iframe id="photoset_iframe_149661412746" class="photoset" scrolling="no" frameborder="0" height="0" width="500" style="border:0px; background-color:transparent; overflow:hidden;" src="http://deligrossery.com/post/149661412746/photoset_iframe/deligrossery/tumblr_ocn1e9dTfK1txl3g8/500/false" name="photoset_iframe_149661412746"></iframe>

Answer 1

尝试将photoset布局块更改为如下内容(您可能需要稍微调整一下):

{block:Photoset}
    <div class="content photoset">
        {block:Photos}
           <img src="{PhotoURL-500}"/>
        {/block:Photos}
        {block:Caption}
           <div class="description">{Caption}</div>
        {/block:Caption}
           <p><a href="{Permalink}" class="link"></a></p>
    </div>
{/block:Photoset}

保留当前主题的备份。

这应该在正常的html模板(不是iframe)中输出照片集。从那里，它应该更容易控制内容的高度，事实上，默认情况下，它应该只是输出内容，高度将自动固定。但在此之后可能还有其他问题需要调查。