在css3过渡期间显示溢出，如何隐藏溢出？

Question

我有以下结构：

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

以下CSS：

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

.service有一个圆形边框（35px）和overflow: hidden;。 这会导致内部.title的边框与其父边框截断（这是预期的行为）。

但是，在转移过程中，只有在转换过程中（因为它开始并且直到它结束，而不是在它开始和结束之前或之后），.title边框不会出于某种原因切断了。

知道发生了什么事吗？ 我试过制作一个fiddle，但它没有重现这个问题。什么属性可能导致这个？

编辑：它的shell中的小提琴不能重现问题，但是looking at the shell alone as a page does（我把小提琴的iframe的来源用来了）

Answer 1

我的解决方案:(但我正在寻找一个更好的解决方案。）

#services-grid .service .title {
   position: relative;
   z-index: 10;
   top: 130px;
   font-size: 13pt;
   text-align: center;
   height: 54px; /* IE fix */

   /* Add radius to bottom of .title */
   border-bottom-left-radius: 8px 15px;
   border-bottom-right-radius: 8px 15px;
}

JSFiddle ：http://jsfiddle.net/KC4TH/4/

Answer 2

发生这种情况的真正原因是浏览器只是在没有定位时才正确裁剪子元素（即position:static;}。我冒昧地改变了你的标记并创建了一个 new jsFiddle ，它可以在Chrome，Firefox和IE10上运行（也适用于IE9，但没有过渡期）。

标记：

<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 :(我试图只在小提琴中包含相关的CSS）

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

“border-radius on the child”解决方案只是一个美化快速修补程序，它可能会导致不一致，并且由于半径差异，它也会在每一侧造成很小的颠簸：