Question

我已经打了几个小时，然后空手而归。溢出隐藏在safari / opera中失败，在chrome / ff / ie中工作。从包装器中删除相对位置使其在safari中工作，仍然在opera中失败。非常感谢任何帮助。

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

Answer 1

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

Answer 2

在Safari溢出时：除非您使用display：inline-table，否则隐藏无法正常呈现：

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

隐藏在safari / opera中的溢出失败

2 个答案: