Question

看起来有一个chrome bug会隐藏大于一列的内容。真的难倒在这一个。看起来像悬停上的缓动也不能很好地在第2列和第3列上运行。

<div class="col3">
  <div id="box">
    <div class="content-item-description">
      Weekly Sales - Limited Time Only - While Supplies Last!
    </div>
    <div id="overlay">
      <span id="plus">This is cool</span>
    </div>
  </div>
  <div id="box">
    <div class="content-item-description">
      Weekly Sales - Limited Time Only - While Supplies Last!
    </div>
    <div id="overlay">
      <span id="plus">This is cool</span>
    </div>
  </div>
  <div id="box">
    <div class="content-item-description">
      Weekly Sales - Limited Time Only - While Supplies Last!
    </div>
    <div id="overlay">
      <span id="plus">This is cool</span>
    </div>
  </div>
</div>

这是CSS

body {
  background: #e7e7e7;
}
#box {
  width: 300px;
  height: 200px;
  box-shadow: inset 1px 1px 40px 0 rgba(0,0,0,.45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto; 
  background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
#overlay {
  background: rgba(0,0,0,.60);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  height: 100%;
}
#box:hover #overlay {
  opacity: 1;
}
#plus {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255,255,255,.85);
  font-size: 12px;
}
.content-item-description { 
  position: absolute;
}
.col3 {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

Codepen示例：http://codepen.io/anon/pen/GjyKE

Answer 1

尝试 - DEMO

这有点破解：

将transform: translateX(-0.99px);和margin: 0px -0.5px;用于第一个div#box

注意： margin = -0.5px和transform = -0.99px不会对HTML元素应用任何额外的边距或宽度，也不会强制div#box移动或推动Next Pixel。

您也可以仅使用以下CSS属性，仅用于webkit broswers：

-webkit-margin-start: -0.5px;
-webkit-margin-end: -0.5px;
-webkit-transform: translateX(-0.99px);

<强> HTML：

<div class="col3">
  <div class="box" style="transform: translateX(-0.99px); margin: 0px -0.5px;">
    <div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
    <div class="overlay">
      <span class="plus">This is cool</span>
    </div>
  </div>
  <div class="box">
    <div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
    <div class="overlay">
      <span class="plus">This is cool</span>
    </div>
  </div>
  <div class="box">
    <div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
    <div class="overlay">
      <span class="plus">This is cool</span>
    </div>
  </div>
</div>

<强> CSS：

body {
  background:#e7e7e7;
}
.box {
  width:300px;
  height:200px;
  box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
  border-bottom:2px solid #fff;
  border-right:2px solid #fff;
  margin:5% auto 0 auto; 
  background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  background-size:cover;
  border-radius:5px;
  overflow:hidden;
  position: relative;
}
.overlay {
  background:rgba(0,0,0,.60);
  text-align:center;
  padding:45px 0 66px 0;
  opacity:0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease; height: 100%;}
.box:hover #overlay {
   opacity:1;
}
.plus {
  font-family:Helvetica;
  font-weight:900;
  color:rgba(255,255,255,.85);
  font-size:12px;
}
.content-item-description {
  position: absolute;
}
.col3 {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

Answer 2

首先，您的所有div elements都在使用 ID ，将其更改为类，否则您将无法重复使用它们。因此，您的HTML应如下所示：

<div class="col3">
    <div class="box">
        <div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
        <div class="overlay"> <span class="plus">This is cool</span>

        </div>
    </div>
    <div class="box">
        <div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
        <div class="overlay"> <span class="plus">This is cool</span>

        </div>
    </div>
    <div class="box">
        <div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
        <div class="overlay"> <span class="plus">This is cool</span>

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

现在，通过适当的HTML，我们可以更好地利用CSS，如下所示：

body {
    background:#e7e7e7;
}
.box {
    width:300px;
    height:200px;
    box-shadow:inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    margin:5% auto 0 auto;
    background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
    background-size:cover;
    border-radius:5px;
    overflow:hidden;
    position: relative;
    display:inline-block;
}
.overlay {
    background:rgba(0, 0, 0, .60);
    text-align:center;
    padding:45px 0 66px 0;
    opacity:0;
    top:0;
    left:0;
    position:absolute;
    transition: all .5s ease;
    height: 100%;
    width:100%;
    z-index:5
}
.box:hover > .overlay {
    opacity:1;
}
.plus {
    font-family:Helvetica;
    font-weight:900;
    color:rgba(255, 255, 255, .85);
    font-size:12px;
}
.content-item-description {
    position: relative;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:50%;
}

简而言之，Chrome没有任何问题（至少在这种情况下），但所有错误都在你的编码上

见forked Codepen example

Chrome上的z-index，溢出和列数的问题/错误

2 个答案:

尝试 - DEMO