溢出显示在css3中转换，我如何隐藏溢出？ [英] Overflow is shown mid css3 transition, how can I hide the overflow?

问题描述

我有以下结构：

 < div class =service lorange> 
< div class =img>< / div> 
< div class =title two-lines>< span> Start-Ups的P-Accelerator< / span>< / div& 
< / div> 
  

和以下CSS：

  .service .img {
 transition：opacity 300ms; 
} 
 .service：hover .img {
 opacity：0 
} 
  

.service 有一个圆角边框（35px）和 overflow：hidden; 。
这会导致内部 .title 以其父边界（这是预期的行为）的边界。

但是，在悬停的过渡期间，只有中间过渡（从开始到结束，不在开始和结束之前或之后）， .title 边界 由于某种原因不会切断。

任何想法发生了什么事？
我试过制作小提琴，但它不会重现的问题。

编辑：其shell中的小提琴不会重现此问题，但将单独查看shell作为一个页面确实 （我使用了iframe的源代码）

解决方案

这是发生的真正原因是浏览器只是正确地裁剪子元素，如果它没有定位 position：static; ）。我自由改变了您的标记，并创建了一个 new jsFiddle ，它可以在Chrome，Firefox和IE10上运行（也可以在IE9上工作，但没有过渡性）。

标记：

 < div class =serviceContainer> <！ - 添加了一个容器 - > 
< div class =service lorange> 
<！ -  removed div.img  - > 
< div class =title two-lines>< span> Start-Ups的P-Accelerator< / span>< / div& 
< / div> 
< / div> 
  

CSS :(我试图只包含相关CSS在小提琴）

 ＃services-grid .serviceContainer {/ *添加了一个具有背景图片的新容器* / 
 background：url ：//foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F3%2F9%2F4%2F0%2F394033%2F394033_p_465430 .jpg / zoKRL9Oq7JFnhFhhAn％2FfTQ％3D％3D / 128,128 / 6 / Catalonia_Yucatan_Beach-Quintana_Roo-Pool-394033.jpg）center center no-repeat; 
 float：left; 
 border-radius：35px; 
 -moz-border-radius：35px; 
 -webkit-border-radius：35px; 
 -ms-border-radius：35px; 
 margin：0 15px; 
 overflow：hidden; 
} 
 
＃services-grid .service.lorange .title span {/ *仅向跨度提供背景颜色* / 
 background-color：＃efbd00; 
} 
 
＃services-grid .service.lorange：hover {/ *仅当悬浮时才将颜色淡入* / 
 background：＃efbd00; 
} 
 
＃services-grid .service .title {
 position：static; / *这是做的伎俩* / 
 padding-top：130px; / *使用padding而不是位置定位span：absolute * / 
 font-size：13pt; 
 text-align：center; 
} 
  

border-radius 对孩子解决方案只是一个化妆品quickfix ，这可能会导致不一致，它也导致每一侧很少碰撞，因为半径差异：

I have the following structure:

<div class="service lorange">
    <div class="img"></div>
    <div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
</div>

And the following CSS:

.service .img {
    transition: opacity 300ms;
}
.service:hover .img {
    opacity:0
}

.service has a rounded border (35px) and overflow: hidden;. This causes the inner .title to have its borders cut-off with its parent's borders (this is the expected behavior).

However, during the transition when hovering, and only mid-transition (since it starts and till it ends, not before or after it starts and finishes), the .title borders do not cut off for some reason.

Any idea what's going on? I've tried making a fiddle, but it doesn't reproduce the issue. What property can be causing this?

Edit: The fiddle in its shell does not reproduce the problem, but looking at the shell alone as a page does (I took the source of the iframe the fiddle uses)

解决方案

The real reason this is happening is that browsers are only cropping the child element properly if it is not positioned (i.e. has position:static;). I've taken the liberty to alter your markup a bit and created a new jsFiddle which works as it should on Chrome, Firefox and IE10 (also working on IE9 but without the transition ofcourse).

Markup:

<div class="serviceContainer"> <!-- added a container -->
    <div class="service lorange">
        <!-- removed div.img -->
        <div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
    </div>
</div>

CSS: (I've tried to include only the relevant CSS in the fiddle)

#services-grid .serviceContainer{ /* added a new container which the has the background image */
    background:url(http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F3%2F9%2F4%2F0%2F394033%2F394033_p_465430.jpg/zoKRL9Oq7JFnhFhhAn%2FfTQ%3D%3D/128,128/6/Catalonia_Yucatan_Beach-Quintana_Roo-Pool-394033.jpg) center center no-repeat;
    float:left;
    border-radius:35px;
    -moz-border-radius:35px;
    -webkit-border-radius:35px;
    -ms-border-radius:35px;
    margin:0 15px;
    overflow:hidden;
}

#services-grid .service.lorange .title span{ /* Give background color only to the span */
    background-color:#efbd00;
}

#services-grid .service.lorange:hover{ /* fade color to container only when hovered */
    background:#efbd00;
}

#services-grid .service .title {
    position:static; /* This is what's doing the trick */
    padding-top:130px; /* position the span using padding instead of position:absolute */
    font-size:13pt;
    text-align:center;
}

The "border-radius on the child" solution is only a cosmetic quickfix which can cause inconsistencies and it's also causing little bumps on each side because of the radius difference:

这篇关于溢出显示在css3中转换，我如何隐藏溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！