Question

我遇到了问题here

问题区域是本网站右侧的两个图像使用max-height:50%;在Firefox中无效。

在Chrome或Safari中打开该页面，但它可以正常运行，但在Firefox中打开它并不起作用。

我尝试将div id=rightcontent更改为% width，但仍无效。

#total #content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -108px; /* the bottom margin is the negative value of the footer's height 

*/
}
#total #content #leftcontent {
    position:relative;
    width:60%;
    padding-left:10%;
    float:left;
}
#total #content #rightcontent {
    position:relative;
    max-width:237px;
    float:right;
}
#total #content #rightcontent img {
    position:relative;
    max-height:50% !important;
    float:right;
    max-width:100% !important;
}

和HTML：

<div id="content">
    <div id="leftcontent">
        <h1>Kola <strong>STEVENS</strong> nejen prodáváme,<br/>ale hlavně na nich jezdíme.</h1>
        <p><a href="" title="Chci jezdit na kole STEVENS" id="chci"></a></p>
    </div>   
    <div id="rightcontent">
        <div id="tst">
            <img src="img/right1.png" />
            <img src="img/right2.png" />
        </div>
    </div>
</div>

Answer 1

我发现了一些像this one这样的类似问题，我认为这是一种处理图像大小的火狐方法。

你的代码还可以，但如果我正在编写代码，我会使用图像包装器来使图像与浏览器交叉兼容。如果您在加载Chrome后调整页面大小，则可以看到您的图像不再像以前那样。

我的解决方案（fiddle）：

<div id="rightcontent">
    <div id="tst">
        <div class="image-holder">
            <img src="img/right1.png" />
        </div>
        <div class="image-holder">
            <img src="img/right2.png" />
        </div>
    </div>
</div>

如何在Firefox中为img创建响应高度（safari，chrome working）

1 个答案: