2

我有以下结构：

<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，但它没有重现这个问题。什么属性可能导致这种情况？

编辑：它的外壳中的小提琴不会重现问题，但是单独查看外壳作为一个页面（我获取了小提琴使用的 iframe 的来源）

4

2 回答 2

4

我的解决方案：（但我正在寻找更好的解决方案。）

#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/

于 2013-07-25T13:53:49.940 回答
3

发生这种情况的真正原因是浏览器仅在子元素未定位（即 has position:static;）时正确裁剪子元素。我冒昧地更改了您的标记并创建了一个新的 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-radiuson the child" 解决方案只是一个装饰性的快速修复，可能会导致不一致，并且由于半径差异，它还会在每一侧造成小颠簸：

奇怪的颠簸

于 2013-07-25T16:36:01.010 回答