css3 列和溢出隐藏答案

【问题标题】：css3 columns and overflow hiddencss3 列和溢出隐藏
【发布时间】：2016-03-21 22:21:00
【问题描述】：

我正在尝试使用 css 列来制作 pinterest 样式的布局。它正在工作，但列中的元素在顶角有一条对角线带，使用overflow: hidden。这些功能区仅显示在 first 列的元素上。我希望它们出现在每一列的所有元素上。如果您删除 overflow: hidden，则功能区会出现在所有元素上。我做了一个 jsfiddle 来演示：

https://jsfiddle.net/6ooefvq3/5/

这种行为似乎只发生在 mac (49.0.2592.0 canary) 上的 chrome 中，在 safari (9.0.2) 上看起来没问题。

知道我可能缺少什么或需要更改什么，因此这些功能区会显示在所有列中的所有元素上吗？

编辑

【问题讨论】：

可以加个截图吗？
我只看到小提琴中的一列元素。
是的，也许小提琴需要有一定的宽度。按照@max 的要求，我用小提琴的截图更新了这个问题。
为什么不按照老式的方式来做呢？ jsfiddle.net/6ooefvq3/6
我花了整整 30 分钟来处理定位和尺寸问题，但问题也可能是 OS X 上的 Chrome 错误。正如亚当所说，你现在必须使用不同的列系统.

标签： html css cross-browser

【解决方案1】：

我认为问题与功能区上的变换属性以及它相对定位的事实有关......但这种行为对我来说太奇怪了，无法理解。可能与被多次举报的fixed position bug相关或相似。

我想出了以下使用边框而不是溢出剪辑的 div 的解决方法：

首先将转换移动到带有overflow: hidden; 的div，然后从功能区中删除position: relative;。然后您应该会看到所有的功能区。

第二次从功能区中移除背景和填充并添加边框，如下所示：

border-bottom: 6px solid red;
border-top: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;

最后，您要做的就是定位和调整包装器的大小。你也可以删除overflow: hidden;，但是因为你的丝带上有阴影，我会把它留在里面。

Here is your adjusted jsfiddle 似乎有效（至少对我而言）。 :-)

还有一个很好的片段：

.columns {
  -webkit-column-width: 250px;
  column-width: 250px;
  width: 95%;
  height: 440px;
}

body {
background: #ccc;
}

.box {
  background: white;
  position: relative;
  width: 70px;
  height: 100px;
  margin: 10px 0;
}

.ribbon-wrapper {
  width: 32px;
  height: 12px;
  overflow: hidden; /* remove this and the ribbons appear */     
  position: absolute;
  right: -10px;
  top: 0px;
   -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
}

.ribbon {
  font: bold 15px Sans-Serif;
  font-size: 8px;
  text-align: center;
  width: 20px;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  border-bottom: 6px solid red;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

<div class="columns">
	  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
</div>

【讨论】：

这是一个疯狂但有用的解决方法，谢谢！对我来说在 Chrome 中看起来不错，所以我会将其标记为答案 :)

【解决方案2】：

为了后代

/*
 __     __   __   __                ___       __   ___  __      ___  __   __     
|__) | |__) |__) /  \ |\ |    |__| |__  |    |__) |__  |__)    |__  /  \ |__)
|  \ | |__) |__) \__/ | \|    |  | |___ |___ |    |___ |  \    |    \__/ |  \
 ___  __   __       ___  ___       __      __             
|__  |__) /  \ |\ |  |  |__  |\ | |  \    |__)  /\  | |\ |
|    |  \ \__/ | \|  |  |___ | \| |__/    |    /~~\ | | \| 
*/


@mixin HELPER-ribbon($width:130px,$thickness:35px,$shadow:0,$font:10px,$font-color:#000,$color:gold) {
& {
position:absolute;
top:0;
right:0;
user-select: none;
pointer-events: none;
width:$width+(($thickness*1.41)/2*(-1)); //1.41 ~ √2
height: $width+(($thickness*1.41)/2*(-1));
overflow: hidden;
color:$font-color;

&:before { 
  @if($shadow==1){
    filter: drop-shadow(0px 0px 7px rgba(#000,0.1));
    //box-shadow:0px 0px 7px rgba(#000,0.1);
  }
  content:'';
  position: absolute;
  right:($width - ($width/1.41))*(-1);
  top: 0px; 
  margin-top:(($thickness*1.41)/2*(-1));
  margin-right:(($thickness*1.41)/2*(-1));
  transform: rotate(45deg);
  transform-origin: left top;
  display: inline-flex;
  padding-bottom:-($thickness*0.5);
  border-bottom: $thickness solid $color;
  border-left: $thickness solid transparent;
  border-right: $thickness solid transparent;
  height: 0px;
  width: $width;
  line-height:$thickness - 2px; 
}
&:after {
  content:attr(title);
  font-weight:500;
  text-transform: uppercase;
  font-size: $font;
  transform: rotate(45deg);
  transform-origin: left top;
  line-height:$thickness - 2px; 
  position: absolute;
  right:($width - ($width/1.41))*(-1);
  top: 0px; 
  margin-top:(($thickness*1.41)/2*(-1));
  margin-right:(($thickness*1.41)/2*(-1));
  width: $width;
  text-align:center;
  z-index:2;
}
}
}
.ribbon {
  width:100%; @include HELPER-ribbon($width: 150px, $thickness:20px, $shadow:1)
}

https://pp98rx64q0.codesandbox.io/

【讨论】：