javascript - Chrome 以百分比正确显示自适应图像和宽度，Firefox 不正确

Question

我在这个问题上找不到。 Chrome 显示正确，Firefox 显示不正确。

html

<div class="gallery-popup">
<div class="popup-shadow"></div>
<div class="gallery-popup-window cf">
    <div class="gallery-popup-header">
        <h3>Pull-out Sofa Queen</h3>
        <a href="#" class="gallery-close"></a>
    </div><!-- gallery-popup-header -->
    <div class="slider-side">
        <div id="gallery">
            <div id="panel">
                 <img id="largeImage" src="http://placehold.it/1024x768" alt=""/>
            </div>
            <div id="thumbs">
                <img src="http://placehold.it/1024x768" alt="" />
                <img src="http://placehold.it/1280x768" alt="" />
                <img src="http://placehold.it/800x600" alt="" />
                <img src="http://placehold.it/650x450" alt="" />
            </div>
        </div>
    </div><!-- slider-side -->
    <div class="gallery-discription-side">
        asdasdasdasdasdasd
    </div><!-- slider-discription-side -->
</div><!-- gallery-popup-window -->

CSS

.gallery-popup {
position: absolute;
left: 0;
top: 0;
z-index: 10000;
width: 100%;
height: 100%;
}

.gallery-popup-window {
position: fixed;
overflow: hidden;
top: 22px;
left: 22px;
bottom: 22px;
right: 22px;
background: #fff;
}

.gallery-popup-header {
height: 93px;
width: 100%;
background: #f7f7f7;
border-bottom: 1px solid #e7e7e7;
}

.gallery-popup-header h3 {
font: 24px/93px 'ProximaNova-Reg';
color: #3e3e3e;
margin: 0 0 0 45px;
padding: 0;
}

.gallery-close {
width: 12px;
height: 12px;
position: absolute;
background: url(../img/gallery-close.png) no-repeat;
right: 45px;
top: 42px;
}

.slider-side {
width: 40%;
height: 100%;
display: table;
position: relative;
border-right: 1px solid #e7e7e7;
padding: 0 20px;
float: left;
}

#gallery {
display: table-cell;
vertical-align: middle;
text-align: center;
}

#thumbs img {
width: 65px;
height: 65px;
}

#thumbs { padding-top: 10px; overflow: hidden; margin-top: 20px;}
#thumbs img, #largeImage {
 cursor: pointer;
}
#thumbs img {
display: inline-block;
vertical-align: top;
max-width: 65px;
max-height: 65px;
margin: 0 15px;
}
#panel { position: relative; }

#panel img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
display: inline;
}

.gallery-discription-side {
margin-left: 40%;
}

Firefox 不理解 40% 的宽度或无法适配图像，我不知道是什么问题，有人可以体验过吗？ 你可以自己看看发生了什么JSFIDDLE .我浏览了最新版本的 chrome 和 firefox。

Answer 1

我通过添加解决了问题

table-layout: fixed;

对于.slider-side

我希望这对其他人有帮助。