Question

我在Chrome浏览器上遇到问题，我的.card项目似乎没有达到合适的高度。它们太多或太少都会导致您在下面的屏幕截图中看到的问题。据我所知，这只发生在Chrome for Windows上。

不会发生此问题的平台：

Internet Explorer 11
Microsoft Edge
火狐
Chrome on Mac

<div class="ui grid stackable container">
  <div class="sixteen wide column">
    <div class="ui link five doubling cards">
      <a class="ui card" href="#">
        <div class="image">
          <img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//002.png">
        </div>

        <div class="content">
          <div class="header">Ivysaur</div>
          <div class="meta">Grass</div>
          <div class="description">

          </div>
        </div>
        <div class="extra content">
          <span><i class="idea icon"></i>Pokemon</span>
        </div>
      </a>
      <a class="ui card" href="#">
        <div class="image">
          <img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//004.png">
        </div>

        <div class="content">
          <div class="header">Charmander</div>
          <div class="meta">Fire</div>
          <div class="description">

          </div>
        </div>
        <div class="extra content">
          <span><i class="idea icon"></i>Pokemon</span>
        </div>
      </a>

      ...

    </div>
  </div>
</div>

Answer 1

我在my website之一的制作中遇到了同样的问题。如果图像不在缓存中，则必须在最近更新后仅在Chrome上下载该错误。

我发现提交是关于semantic-ui用来生成卡片的css-flex。这个bug report详细说明了问题和一些解决方法我选择将min-height: 0;添加到我的卡片的内容中，它按照应有的方式工作。

语义UI卡高度问题（窗口上的chrome）

1 个答案: