Question

我的图片在chrome和firefox中的显示效果不同。

这是一个小提琴http://jsfiddle.net/SEOplay/4FGad/2/在firefox和chrome中打开它，你会看到图像尺寸不同。

Chrome会根据需要显示图片。

HTML

    <div id="imageContent">
        <div id="bigImgCon">    
<a href="<?php echo $firstImg; ?>" rel="lightbox"><img id="firstImage" rel="lightbox" src="http://placekitten.com/200/400" /></a>

        </div>
    </div>

CSS

div#imageContent {
    width:100%;
    text-align:center;
    margin:0 auto;
}
div#bigImgCon {
    width:100%;
    max-height:300px;
    overflow:hidden;
    position:relative;
    margin-top:10px;
    background-color:red;
}
img#firstImage {
    max-width:100%;
    max-height:100%;
    cursor:hand;
    cursor:pointer;
    display:inline-block;
}

Answer 1

在firefox中，我将max-height更改为高度，它的工作方式与Chrome相同......第一个将高度设置为300px的是执行该操作的那个。

更新...从div＃bgImgCon中取出max-height，然后将其放在div＃imageContent类上。在我看来，这样就可以为你做到这一点。

div#bigImgCon {
    width:100%;
    overflow:hidden;
    position:relative;
    margin-top:10px;
    background-color:red;
}
img#firstImage {
    max-width:100%;
    max-height:300px;
    cursor:hand;
    cursor:pointer;
    display:inline-block;
}

为什么Firefox和Chrome以不同的方式显示此图像？

1 个答案: