鉻，Android瀏覽器不呈現圖像樣式

Question

我有一個反應組件，加載一些數據，遍歷數組，也輸入一堆來自lorempixel的圖像。

我對這些圖像以下樣式：

.ekipa-list .ekipa-li .ekipa-li-headshot { 
    height: 3em; 
    width: 3em; 
    border-radius: 50%; 
    padding-top: 0; 
    margin-bottom: 0; 
} 

這些得到正確的我的觀點一個應用。他們也可以在Safari和Firefox中正確應用。但是，在另一種觀點中，它們不適用於初始負載。兩個視圖都使用相同的數據加載相同的組件。

不過，我可以在Chrome中看到的樣式檢查元素時，但他們不會呈現

要重現此，請訪問： http://altereko.si/#/zavod

看到的圖像在底部列表中。然後去kontakt，看到他們正確渲染。它們也將在屏幕調整大小時正確呈現。

這個問題似乎是由下面這行代碼引起的：

{this.props.bio ? <p className="ekipa-li-bio">{this.props.bio}</p> :null} 

當我從我的組件刪除：

render() { 
    return (
     <li className="ekipa-li" id={this.props.id}> 
     <div className="ekipa-li-visible" onClick={this.expandContact}> 
      <img alt="portret-člana-ekipe" className="ekipa-li-headshot" src={this.props.photo}/> 
      <div className="ekipa-li-text"> 
      <p className="ekipa-li-name">{this.props.name}</p> 
      <p className="ekipa-li-function">{this.props.function}</p> 
      {this.props.bio ? <p className="ekipa-li-bio">{this.props.bio}</p> :null} 
      </div> 
     </div> 
     {!this.state.hidden 
      ? (<div className="ekipa-li-expand"> 
       <div className="ekipa-li-expand-link-container"> 
       <a className="ekipa-li-expand-link" href={'mailto:'+this.props.email}> 
        <i className="ekipa-li-icon material-icons">email</i> 
        <span className="ekipa-li-expand-link-text">{this.props.email}</span> 
       </a> 
       </div> 
       <div className="ekipa-li-expand-link-container"> 
       <a className="ekipa-li-expand-link" href={'tel:'+this.props.mobile}> 
        <i className="ekipa-li-icon material-icons">stay_current_portrait</i> 
        <span className="ekipa-li-expand-link-text">{this.props.mobile}</span> 
       </a> 
       </div> 
      </div>) 
      : null} 
     </li> 
    ) 
    } 

呈現的一切如預期。

同樣的事情發生在我不通過生物支柱時。

Answer 1

最簡單的修復方法是將img換成div。目前發生這種情況的原因是zavod頁面包含多行段落文本，它正在包裹和伸展柔性佈局。

.flex { 
 
    display:flex; 
 
    width: 300px; 
 
}

<div class="flex"> 
 
    <img alt="portret-člana-ekipe" class="ekipa-li-headshot" src="http://lorempixel.com/100/100/"> 
 
    <div> 
 
    <p> 
 
     Nam erat mi, ullamcorper at blandit in, lacinia at magna. Suspendisse sit amet dapibus justo. Nam finibus nibh at viverra vehicula. Mauris posuere ac dui nec sollicitudin. Sed varius sed justo in elementum. Aliquam euismod nisl et massa fermentum tempus. Suspendisse et efficitur metus. Donec eleifend mi consequat libero semper mattis. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="flex"> 
 
    <div> 
 
    <img alt="portret-člana-ekipe" class="ekipa-li-headshot" src="http://lorempixel.com/100/100/"> 
 
    </div> 
 
    <div> 
 
    <p> 
 
     Nam erat mi, ullamcorper at blandit in, lacinia at magna. Suspendisse sit amet dapibus justo. Nam finibus nibh at viverra vehicula. Mauris posuere ac dui nec sollicitudin. Sed varius sed justo in elementum. Aliquam euismod nisl et massa fermentum tempus. Suspendisse et efficitur metus. Donec eleifend mi consequat libero semper mattis. 
 
    </p> 
 
    </div> 
 
</div>