铬，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>