Html Chrome上z索引、溢出和列计数的问题/错误

看起来有一个chrome bug隐藏了大于1的列的内容。我真的很难受。另外，在第2列和第3列上，悬停的缓和效果似乎也不太好

每周销售-仅限时间-供应持续！
这很酷
每周销售-仅限时间-供应持续！
这很酷
每周销售-仅限时间-供应持续！
这很酷

这是CSS

正文{
背景：#e7e7e7；
}
#盒子{
宽度：300px；
高度：200px；
盒影：插入1px 1px 40px 0 rgba（0,0,0,45）；
边框底部：2倍实心#fff；
右边框：2px实心#fff；
利润率：5%自动0自动；
背景：url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
背景尺寸：封面；
边界半径：5px；
溢出：隐藏；
位置：相对位置；
}
#覆盖层{
背景：rgba（0,0,0,60）；
文本对齐：居中；
填充：45px 0 66px 0；
不透明度：0；
-webkit过渡：不透明度。25秒轻松；
-moz过渡：不透明度。25秒缓解；
身高：100%；
}
#框：悬停#覆盖{
不透明度：1；
}
#加上{
字体系列：Helvetica；
字号：900；
颜色：rgba（255255.85）；
字体大小：12px；
}
.内容项说明{
位置：绝对位置；
}
.col3{
-webkit列数：3；/*Chrome、Safari、Opera*/
-moz列计数：3；/*Firefox*/
列数：3；
}

代码开放示例：

尝试- 有点老套：

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

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;
}

使用

transform:translateX（-0.99px）和
边距：0px-0.5px到第一个
div#box

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

您还可以仅对webkit broswers使用以下CSS属性：

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

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;
}

试试-
有点老套：

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

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;
}

使用
transform:translateX（-0.99px）和
边距：0px-0.5px到第一个
div#box

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

您还可以仅对webkit broswers使用以下CSS属性：

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

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;
}

首先，您的所有
div元素都在使用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>

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并没有什么问题（至少在这种情况下是这样），但所有的问题都在编码上

再见
首先，您的所有
div元素
都在使用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>

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并没有什么问题（至少在这种情况下是这样），但所有的问题都在编码上

再见
你的问题是什么？你的问题是什么？好的。伟大的我有重大疏忽。实际上，我正在尝试将.content项描述与框的底部对齐。已将位置更改为绝对位置，底部为0。而且它在chrome中似乎不起作用，所以我已经将这些应用到我的实际代码中，但仍然存在同样的问题。我用我的问题创建了一个新的代码笔。您会注意到，在chrome中，所有大于1的列都没有呈现.content项描述以及一些悬停问题。这是代码笔-你的代码笔与我告诉你的完全不同是的，但概念仍然存在。包含背景图像、悬停和说明的3列。除了chrome之外，所有浏览器都能正常工作。我遇到的问题仅在chrome上是一致的。我创建的设计是响应性的。如果您调整浏览器使其全部堆叠在一列上，则一切正常。对不起，这让我很痛苦。我用词很仔细，当我说“完全”时，我的意思不是轻微的，而是完全的。看，您使用的是列，这是您必须摆脱的，因为我已经将您的模型从零开始更改为适用于所有浏览器的模型。您可以自己测试，在代码笔中删除
列计数
、
列间距
和
列填充
属性（当然还有供应商前缀），然后查看它是如何“神奇地”工作的。现在应用我给您的代码，您将再次拥有列。这基本上就是问题所在：你使用了一个错误的方法，所以你必须改变它才能让它工作。好的。伟大的我有重大疏忽。实际上，我正在尝试将.content项描述与框的底部对齐。已将位置更改为绝对位置，底部为0。而且它在chrome中似乎不起作用，所以我已经将这些应用到我的实际代码中，但仍然存在同样的问题。我用我的问题创建了一个新的代码笔。您会注意到，在chrome中，所有大于1的列都没有呈现.content项描述以及一些悬停问题。这是代码笔-你的代码笔与我告诉你的完全不同是的，但概念仍然存在。包含背景图像、悬停和说明的3列。除了chrome之外，所有浏览器都能正常工作。我遇到的问题仅在chrome上是一致的。我创建的设计是响应性的。如果您调整浏览器使其全部堆叠在一列上，则一切正常。对不起，这让我很痛苦。我用词很仔细，当我说“完全”时，我的意思不是轻微的，而是完全的。看，您使用的是列，这是您必须摆脱的，因为我已经将您的模型从零开始更改为适用于所有浏览器的模型。您可以自己测试，在代码笔中删除
列-