溢出顯示在css3中間過渡時，我怎樣才能隱藏溢出？

我有以下結構：溢出顯示在css3中間過渡時，我怎樣才能隱藏溢出？

<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，但它沒有重現這個問題。什麼財產可以造成這種情況？

編輯：在其外殼的小提琴不會重現該問題，但looking at the shell alone as a page does（我把小提琴使用iframe的來源）

來源

2013-07-23 casraf

出現這種情況的真正原因是，瀏覽器只是作物如果子元素沒有被定位，則正確地ping該子元素。有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對孩子」的解決方案僅僅是一個化妝品quickfix這可能會導致不一致，並且由於半徑差異還會在每側產生小的顛簸：

Weird bumps

來源

2013-07-25 16:36:01

+1優秀的答案！其實找到了根本問題！ – Anil

@JustAnil謝謝隊友:)我在過去遇到過這樣的問題，所以我真的到底了... –

你每天都在學習新東西！...感謝分享！ – Anil

我的解決辦法：（可是我找一個更好的。）

#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-25 13:53:49

+1 - 爲什麼我沒有想到這個？.. – Anil

感謝JSFiddle！ –

這是一個有趣的解決方案，但是我想避免爲標題本身設置邊界半徑，因爲它會比解決方案更像解決方法，並且它不會真正解決問題本身。如果我的最後期限沒有得到解決，我會採取這種做法。 – casraf

溢出顯示在css3中間過渡時，我怎樣才能隱藏溢出？

回答

相關問題