css：display：table（FFは正常に動作しますが、ChromeとEdgeでは動作しません）

Question

ChromeとMS Edgeで次の問題が発生しています。

マイHTML & CSSコード：

section.content-background { 
 
    width: 655px; 
 
    height: 100%; 
 
    background-color: #bebebe; 
 
    float: left; 
 
    margin-left: 10px; 
 
    padding-bottom: 5px; 
 
    padding-top: 5px; 
 
} 
 
section.content-firstground { 
 
    width: 645px; 
 
    height: 100%; 
 
    background-color: #ececec; 
 
    display: table; 
 
} 
 
div.personal-info-image { 
 
    width: 170px; 
 
    height: 100%; 
 
    display: table; 
 
    background-color: #FFF; 
 
    float: left; 
 
    background-image: url(../_images/person-info-image.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 
div.content-input { 
 
    width: 400px; 
 
    height: 50px; 
 
    float: left; 
 
    border-bottom: 1px solid #424242; 
 
}

<section class="content-background"> 
 
    <section class="content-firstground"> 
 

 
    <div class="personal-info-image"> 
 
    </div> 
 

 
    <div class="content-input"> 
 
    </div> 
 

 
    <div class="content-input"> 
 
    </div> 
 
    <div class="content-input"> 
 
    </div> 
 
    <div class="content-input"> 
 
    </div> 
 

 
    </section> 
 
</section>

div.personal-INFO-画像はChromeとMSエッジに表示されません。

これを解決する助けがありますか？

Answer 1

クロムは、.personal-info-imageクラスで高さが100％であるのが好きではありません。これを絶対的な高さにすると、イメージが表示されます。例えば

：height:204px;

div.personal-info-image{ 
    width: 170px; 
    height:204px; 
    background-color: #FFF; 
    float: left; 
    background-image:url(http://ichef.bbci.co.uk/onesport/cps/800/cpsprodpb/4039/production/_89214461_vardy-mahrez.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

はここに例を示しますhttps://jsfiddle.net/h9m40f9L/