Html chrome、android浏览器不渲染图像样式

我有一个react组件，它加载一些数据，在数组上迭代，还从lorempixel输入一组图像

对于这些图像，我有以下样式：

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

这些正确地应用于我的一个视图中。它们在Safari和Firefox中也得到了正确的应用。但在另一个视图中，它们不会应用于初始负载。两个视图正在加载具有相同数据的相同组件

但是，在检查元素时，我可以在Chrome中看到样式，但它们不会被渲染

要复制此信息，请转到：

请参见底部列表中的图像。然后转到kontakt，查看它们是否正确渲染。在调整屏幕大小时，它们也将正确渲染

此问题似乎是由以下代码行引起的：

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

{this.props.bio？
{this.props.bio}
: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>
    )
  }

render（）{
返回(

{this.props.name}
{this.props.function}
{this.props.bio？
{this.props.bio}
:null}
{！这个。状态。隐藏
? (
)
：null}

)
}

一切都按预期呈现

---

当我没有通过bio道具时也会发生同样的情况。

最简单的修复方法是将您的

img

包装成

div

。目前出现这种情况是因为

zavod

页面具有多行段落文本，该文本正在包装和拉伸flex布局

.flex{
显示器：flex；
宽度：300px；
}

Nam erat mi，布朗迪特的ullamcorper，麦格纳的lacinia。我只是坐在那里。viverra vehicula的Nam finibus nibh。莫里斯·波苏尔·艾克·杜伊·内克·索利西图丁。元素中的变量为。阿利奎姆·尤伊斯莫德·尼索和马萨·坦普斯发酵液。怀疑和效率。请不要让我的自由女神塞姆佩尔·马蒂斯。


Nam erat mi，布朗迪特的ullamcorper，麦格纳的lacinia。我只是坐在那里。viverra vehicula的Nam finibus nibh。莫里斯·波苏尔·艾克·杜伊·内克·索利西图丁。元素中的变量为。阿利奎姆·尤伊斯莫德·尼索和马萨·坦普斯发酵液。怀疑和效率。请不要让我的自由女神塞姆佩尔·马蒂斯。

最简单的修复方法是将您的

img

包装到

div

中。目前出现这种情况是因为

zavod

页面具有多行段落文本，该文本正在包装和拉伸flex布局

.flex{
显示器：flex；
宽度：300px；
}

Nam erat mi，布朗迪特的ullamcorper，麦格纳的lacinia。我只是坐在那里。viverra vehicula的Nam finibus nibh。莫里斯·波苏尔·艾克·杜伊·内克·索利西图丁。元素中的变量为。阿利奎姆·尤伊斯莫德·尼索和马萨·坦普斯发酵液。怀疑和效率。请不要让我的自由女神塞姆佩尔·马蒂斯。


Nam erat mi，布朗迪特的ullamcorper，麦格纳的lacinia。我只是坐在那里。viverra vehicula的Nam finibus nibh。莫里斯·波苏尔·艾克·杜伊·内克·索利西图丁。元素中的变量为。阿利奎姆·尤伊斯莫德·尼索和马萨·坦普斯发酵液。怀疑和效率。请不要让我的自由女神塞姆佩尔·马蒂斯。

firefox和safari按预期呈现此内容仍然很奇怪…感谢帮助firefox和safari按预期呈现此内容仍然很奇怪…感谢帮助