1

代码：http: //jsfiddle.net/B6DsF/15/

我已经敲了几个小时，空手而归。在 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);
}
4

2 回答 2

0

您需要更改位置：相对于静态。

于 2013-05-25T23:51:01.333 回答
0

在 Safari 上溢出：除非您像这样使用 display: inline-table，否则隐藏不会正确呈现：

div.folio-wrap {
    display: inline-table;
    overflow: hidden !important;
}
于 2015-09-30T17:59:43.570 回答