CSS列计数和Chrome错误：如何避免溢出内容被裁剪 [英] CSS column-count and Chrome bug: how to avoid overflow content being cropped

问题描述

使用 column-count 时，似乎会裁剪任何溢出内容。

#columns {-webkit-column-count：1; -webkit-column-gap：10px; / * - webkit-column-fill：auto; * / -moz-column-count：1; -moz-column-gap：10px; / * - moz-column-fill：auto; * / column-count：1; column-gap：10px / * column-fill：auto; * / border：1px solid red; overflow：visible;}。pin {width：100％; display：inline-block; padding：10px; margin-bottom：5px;}

 < div id = columns> < div class =pin> < a href =＃> < span class =onsale>销售！< / span> < img src =＃。jpg/> < / a> < h3>产品1< / h3> < / a> < / div>< / div>  

结果：

编辑2：

  span.onsale {
 min-height：3.236em; 
 min-width：3.236em; 
 padding：.202em; 
 font-size：1em; 
 font-weight：700; 
 position：absolute; 
 text-align：center; 
 line-height：3.236; 
 top：-.5em; 
 left：-.5em; 
 margin：0; 
 border-radius：100％; 
 background-color：$ highlight; 
 color：$ highlightext; 
 font-size：.857em; 
 -webkit-font-smoothing：antialiased; 
} 
  

解决方案

不知道你是如何造型你的 .onsale ，所以我以自己的方式风格。

您在 .pin 中使用 position：relative ，然后使用 position：absolute 更新：问题是 webkit-column-count：1 在Chrome中，因为与 1 或没有什么是相同的，只是删除它，并使用另一种技术，将允许您< c $ c>位置：绝对

div class =snippetdata-lang =jsdata-hide =false>

  #columns {border：1px solid red; } .pin {width：100％; display：inline-block; padding：10px; margin-bottom：5px; position：relative} .onsale {min-height：3.236em; min-width：3.236em;填充：.202em; font-size：1em; font-weight：700; position：absolute; text-align：center; line-height：3.236; top：-.5em; left：-.5em; margin：0; border-radius：100％;背景颜色：lightgreen;颜色：白色; font-size：.857em; -webkit-font-smoothing：antialiased;}  

  div id =columns> < div class =pin> < a href =＃> < span class =onsale>销售！< / span> < img src =// placehold.it/300x300/> < / a> < h3>产品1< / h3> < / div> < div class =pin> < a href =＃> < span class =onsale>销售！< / span> < img src =// placehold.it/300x300/> < / a> < h3>产品2< / h3> < / div>< / div>  

When column-count is used, it seems to crop any overflow content.

#columns {
  -webkit-column-count: 1;
  -webkit-column-gap: 10px;
  /*-webkit-column-fill: auto;*/
  -moz-column-count: 1;
  -moz-column-gap: 10px;
  /*-moz-column-fill: auto;*/
  column-count: 1;
  column-gap: 10px;
  /*column-fill: auto;*/
  border: 1px solid red;
  overflow: visible;
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
}

<div id="columns">

  <div class="pin">

    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="#.jpg" />
    </a>
    <h3>Product 1</h3>
    </a>
  </div>

</div>

Result:

Any ideas how I can fix this?

EDIT 1:

It seems it is a bug in Chrome.

it is fine on Firefox though:

EDIT 2:

span.onsale {
    min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: $highlight;
    color: $highlightext;
    font-size: .857em;
    -webkit-font-smoothing: antialiased;
}

解决方案

I'm not sure how you are styling your .onsale so I styled on my own way.

If you use position:relative in .pin and then position:absolute you can achieve what you want.

UPDATE: The issue is the webkit-column-count:1 in Chrome and since having that with 1 or nothing is the same, just remove it and use another technique that will allow you to have the .onsale out of flow by using position:absolute

#columns {
 
  border: 1px solid red;
  
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
  position: relative
}
.onsale {
   min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: lightgreen;
    color: white;
    font-size: .857em;
    -webkit-font-smoothing: antialiased;
}

<div id="columns">
  <div class="pin">
    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="//placehold.it/300x300" />
    </a>
    <h3>Product 1</h3>
  </div>
  <div class="pin">
    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="//placehold.it/300x300" />
    </a>
    <h3>Product 2</h3>
  </div>
</div>

这篇关于CSS列计数和Chrome错误：如何避免溢出内容被裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！