Question

我在我的网站上我在他们自己的父母div中有两张图片（每张图片的完整结构是div a img）。 div具有流体高度（height: 10%;）。其中的图像设置为max-height: 100%;。 Webkit中的图像大小正确，但每个其他浏览器似乎都有一个或两个问题。我已经尝试过寻找可能的解决方案，但我甚至无法想象甚至是的原因。

由于它可能更容易向您展示，这里是相关的页面和文件：

Main page（中心徽标图片和＆＃34; CRASH＆＃34;底部的徽标）
CSS（相关的div为.logo和.crash）

以下是我所看到的细节。谢谢你的帮助！

编辑：从未真正提到过不良结果。在它破坏的浏览器中，图像以100％显示 - 不是100％的父容器，而是以图像本身的完整尺寸显示，从而打开容器。希望这能澄清事情！

Browser / DIV | .logo | .crash
chrome 22     | works |  works (same results on my friend's copy of Safari)
opera 11.61   | broke |  broke
ie 9          | works |  broke
firefox 12    | works |  broke

Answer 1

我在firefox 15.0中使用Firebug找到了它，并得到了一个解决方案，希望它适用于所有浏览器。

<强> 1 即可。删除为#footer定义的css规则，并在.crash中添加这些规则，如下所示：

.crash {
    height: 10%;
    position: absolute;
    text-align: center;
    top: 82%;
    width: 100%;
}

<强> 2 即可。添加以下规则：

.footerNav {
    position: absolute;
    text-align: center;
    top: 92%;
    width: 100%;
}

第3 即可。并在.mod-languages中替换现有的样式，如下所示：

.mod-languages {
    position: absolute;
    text-align: center;
    top: 96%;
    width: 100%;
}

附加说明：

您的HTML结构如下所示：

<div class="moduletable">
    <div class="custom">
        <div id="logo">
            <a href="http://www.millioncranes.com">
        </div>
    </div>
</div>

所以当你用moduletable包裹#footer时如下：

<div id="footer">
    <div class="moduletable">
        <div class="custom">
            <div class="crash">
                <a title="CRASH Japan" href="http://crashjapan.com">
                    <img src="/images/crashlogo.png">
                </a>
            </div>
        </div>
    </div>
    .. /*Another moduletable*/
    .. /*Another moduletable*/
</div>

这会导致问题。 #footer应用于moduletable内所有#footer元素的样式。所以不需要将这些元素包含在页脚内。像你为#logo设计风格一样设计你的元素，就是这样！

希望它能在所有浏览器中解决您的问题。

Answer 2

我担心我这里只有一个chromebook，所以我无法测试任何非webkit浏览器，但这是我的猜测：

为了使渲染引擎知道如何应用height: 100%，它必须确定容器元素的高度。人们长时间以100％的高度摔跤。

首先，我要确保您的a为display: block，以便img明确知道其容器有多高。

然后我会为img s容器元素设置明确的高度，看看是否有任何修复它 - 然后当你知道问题是什么时，你就可以找到解决方案。希望。

让我知道你是怎么过的。

Answer 3

并非所有浏览器都支持max-height;见http://caniuse.com/#search=max-height

你并没有真正说出你不喜欢的结果的哪个方面：你期望发生什么和实际发生的是什么区别？

CSS没有在某些浏览器中调整图像大小

3 个答案: