3

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

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

  • 主页（中心标志图片和底部的“CRASH”标志）
  • 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
4

3 回答 3

3

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

1 . 删除为定义的 css 规则#footer并添加这些规则，.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>

So when you wrap moduletable with #footer like below:

<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>

This causing a problem. The style of #footer applying on all moduletable elements inside #footer. So do not need to wrap these elements inside footer. Style your elements like you have styled for #logo, That's it!

Hopefully it will fix your problem in all browsers.

于 2012-09-07T05:49:49.530 回答
0

恐怕我这里只有一个 chromebook，所以我无法在任何非 webkit 浏览器上进行测试，但这是我的猜测：

为了让渲染引擎知道如何应用height: 100%，它必须确定容器元素的高度。长期以来，人们一直在与 100% 的身高搏斗。

首先，我会确保你a的绝对display: block知道img它的容器有多高。

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

让我知道你是怎么办的。

于 2012-09-07T05:47:22.463 回答
-1

并非所有浏览器都支持最大高度；见http://caniuse.com/#search=max-height

您并没有真正说出您不喜欢结果的哪个方面：您期望发生的事情与实际发生的事情之间究竟有什么区别？

于 2012-09-07T05:21:11.387 回答