私のイメージがMicrosoft Edgeに表示されないのはなぜですか？

Question

クライアントは、マイクロソフトエッジを通して見るとき、一部の画像が働いていないポイントを作っていますが、完全にクローム、IEのFirefoxのも、古いバージョンを使用して見つける作業：

Microsoftは、それは次のように表示されるのEdge：

私のコードは非常に簡単です：

.card .staff_pic { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.card .linkedin-icon { 
 
    margin-top: 10px; 
 
} 
 
.card { 
 
    height: 100%; 
 
    width: 20%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    float: left 
 
} 
 
.card_content { 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    padding: 20px; 
 
    width: 100%; 
 
    height: 90%; 
 
    position: absolute; 
 
    bottom: -400px; 
 
    transition: all .5s ease; 
 
    color: #fff 
 
} 
 
.card_content h3 { 
 
    font-size: 28px; 
 
    margin-top: 1.5em; 
 
    color: #fff; 
 
    margin-bottom: 0px; 
 
} 
 
.card_content p { 
 
    font-size: 18px; 
 
    color: white; 
 
} 
 
.card:hover .card_content { 
 
    background-color: rgba(151, 145, 59, 0.8); 
 
    bottom: 30px; 
 
}

<div class="card"> 
 
    <img class="staff_pic alignnone size-medium wp-image-4306" src="http://www.carleyconsult.com/wp-content/uploads/2014/10/David.png" alt="David" /> 
 
    <div class="card_content"> 
 
    <h3>David Durham</h3> 
 
    Head of Bid Management &amp; Consultancy Services 
 
    <a href="#" target="_blank"> 
 
     <img class="linkedin-icon alignnone size-full wp-image-4321" src="../wp-content/uploads/2014/10/linkedin.png" alt="linkedin" width="37" height="36" /> 
 
    </a> 
 
    </div> 
 
</div>

どれでも役立つだろう大変感謝します。

Answer 1

私はエッジの要素を検査し、あなたの<p>と<img>要素としてレンダリングされます。

<p> 
    <img class="staff_pic alignnone size-medium wp-image-4310" alt="Jim" &nbsp;src="http://www.carleyconsult.co.uk/wp-content/uploads/2014/10/Jim.png"> 
</p> 

はそこに に注意してください。これにより、要素が壊れています。それはChromeで正しくレンダリングされているため、Edgeが何か不思議なことをしているのではないかと疑います。 1つの修正点は、<img>要素を検索して を見つけて削除するjQueryスクリプトを実行することです。それは理想的な解決策ではありませんが、私は頭の上からより良いものを考えることができません。別のものを探している間、少なくともそれは1つです！