2013-07-23 152 views
2

我有以下結構:溢出顯示在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的來源)

回答

3

出現這種情況的真正原因是,瀏覽器只是作物如果子元素沒有被定位,則正確地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

+0

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

+3

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

+0

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

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

的jsfiddlehttp://jsfiddle.net/KC4TH/4/

+1

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

+0

感謝JSFiddle! –

+0

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