溢出隱藏在Safari瀏覽器/歌劇失敗

代碼：http://jsfiddle.net/B6DsF/15/溢出隱藏在Safari瀏覽器/歌劇失敗

我拍着這幾個小時，來到空手而歸。在safari/opera中隱藏溢出失敗，在chrome/ff/ie中工作。從包裝中刪除相對位置使其在safari中工作，仍然在歌劇中失敗。任何幫助是極大的讚賞。

HTML：

<div class="folio-wrap" style="background-image:url('http://www.gifszone.com/content/background/color_beige/color_beige_0.jpg')"> <a href="#" title="Text Here" class="folio-text">Text Here</a>

CSS

div.folio-wrap { 
width: 136px; 
height: 136px; 
display: block; 
top: 0; 
margin: 0; 
padding: 0; 
position: relative !important; 
overflow: hidden !important; 
text-align: center; 
background-repeat: no-repeat; 
background-position: center center; 
border: 2px #3b3b3b solid; 
-moz-border-radius: 70px; 
-webkit-border-radius: 70px; 
-ms-border-radius: 70px; 
border-radius: 70px; 
-moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.85); 
-webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.85); 
box-shadow: 0 0 12px rgba(0, 0, 0, 0.85); 
-moz-filter: sepia(0.8) opacity(0.25); 
-webkit-filter: sepia(0.8) opacity(0.25); 
-ms-filter: sepia(0.25) opacity(0.3); 
filter: sepia(0.8) opacity(0.25); 
-moz-transition: top 0.3s ease, -moz-filter 0.8s ease, filter 0.8s ease, opacity 0.8s ease, border 0.5s ease; 
-webkit-transition: top 0.3s ease, -webkit-filter 0.8s ease, filter 0.8s ease, opacity 0.8s ease, border 0.5s ease; 
-ms-transition: top 0.3s ease, -ms-filter 0.8s ease, filter 0.8s ease, opacity 0.8s ease, border 0.5s ease; 
transition: top 0.3s ease, -moz-filter 0.8s ease, -webkit-filter 0.8s ease, -ms-filter 0.8s ease, filter 0.8s ease, opacity 0.8s ease, border 0.5s ease; 
} 

div.folio-wrap:hover { 
top: -4px; 
border: 2px #6b6b6b solid; 
-moz-filter: sepia(0) opacity(1); 
-webkit-filter: sepia(0) opacity(1); 
-ms-filter: sepia(0) opacity(1); 
filter: sepia(0) opacity(1); 
} 

div.folio-wrap > a.folio-text { 
width: 128px; 
height: 50px; 
display: block; 
margin: 80px auto 0 auto; 
padding: 3px; 
font-size: 10px; 
font-weight: bold; 
color: #f0f0f0 !important; 
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8); 
background: #ababab; 
background: -moz-linear-gradient(top, rgb(90, 90, 90) 0%, rgb(255, 255, 255) 100%); 
background: -webkit-linear-gradient(top, rgb(90, 90, 90) 0%, rgb(255, 255, 255) 100%); 
background: -ms-linear-gradient(top, rgb(90, 90, 90) 0%, rgb(255, 255, 255) 100%); 
background: linear-gradient(top, rgb(90, 90, 90) 0%, rgb(255, 255, 255) 100%); 
border-top: 1px solid #6b6b6b; 
-moz-transition: all 0.3s ease; 
-webkit-transition: all 0.3s ease; 
-ms-transition: all 0.3s ease; 
transition: all 0.3s ease; 
} 

div.folio-wrap > a.folio-text:hover { 
    color: #2b2b2b !important; 
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 1); 
}

來源

2013-02-16 occsceo

您需要更改的位置是：相對於靜態的。

來源

2013-05-25 23:51:01

在Safari上溢出：隱藏不能正常顯示，除非你使用顯示：內聯表是這樣的：

div.folio-wrap { 
    display: inline-table; 
    overflow: hidden !important; 
}

來源

2015-09-30 17:59:43 swatantra

溢出隱藏在Safari瀏覽器/歌劇失敗

回答

相關問題