Question

我浪费了很多时间来解决这个问题，所以我的最后一步就是问你们那些人。也许你可以帮助我。

这是关于这个典型的css-table问题，其中firefox（和ie）将无法正确呈现max-width。我已经尝试在几乎所有位置实施table-layout: fixed;，但我不会让这个孩子跑步。

Safari 完美显示所有内容以及我希望它如何。但是 Firefox 没有调整图像的大小（在我的小提琴中，当“它”发生时我标记了背景RED）......并且出现了一个不需要的水平滚动条。（所以你必须调整窗口大小）（请注意，将img宽度设置为100％对我来说不起作用，因为较小的imgs会向上扩展）

如何让Firefox正确调整图像大小？

小提琴：http://jsfiddle.net/4jk2hk77/

HTML：

<article>
    <div class="gallery" style="width: 400px;">
        <img src="http://lorempixel.com/400/267/">
    </div>
    <div>
        <div class="ctrl"></div>
         <h2>TITLE</h2>
        <p>Lorem ipsum …</p>
    </div>
</article>

SCSS：

article {
    display: table;
    width: 100%;

    .gallery {
        display: table-cell;
        vertical-align: top;
        max-width: 100%;

        img {
            max-width: 100%;
        }

        + div {
            margin-left: 30px;
            min-width: 200px;

            h2, p {
                max-width: 300px;
            }
        }
    }
}

.ctrl {
    width: 150px;
    height: 10px;
    float: right;
    background: black;
    margin: 0 0 1em 1em;
}

谢谢你们的每一个想法我都会得到!!

Answer 1

最后我找到了自己的答案！

这是工作解决方案：http://jsfiddle.net/mkLdyqq0/

HTML中的变化：

<div class="gallery" style="width: 400px;">
        <div>
            <img src="http://lorempixel.com/400/267/">
        </div>
    </div>
    <div>

（img-Tag现在被另一个div标签包裹）

SCSS的变化：

article {
    …

    .gallery {
        …
        max-width: 100%;

        div {
            display: inline-table;
            table-layout: fixed;
            width: 100%;

            img {
                …
            }
        }

        + div {
            …
        }
    }
}

由于使用内联表和表格布局来设置包装器div的样式：修复...它＆＃34;某种程度上＆＃34;的工作原理。

WOHOOOO！

所有输入的THX !!

棘手的Firefox响应式布局问题与显示表和最大宽度

1 个答案: