css - 溢出显示在 css3 过渡中，如何 overflow hidden ？

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 具有圆 Angular 边框 (35px) 和 overflow: hidden;。这会导致内部 .title 的边框与其父级的边框截断(这是预期的行为)。

但是，在悬停时的过渡期间，并且只有中间过渡(从开始到结束，而不是在开始和结束之前或之后)，.title 边框 没有因为某种原因被切断。

知道发生了什么事吗？我试过制作 fiddle ，但它不会重现该问题。什么属性可能导致这种情况？

编辑: shell 中的 fiddle 没有重现问题，但是 looking at the shell alone as a page does (我拿了 fiddle 使用的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/