Question

溢出在Safari中无效。请帮忙。

在圆圈中，溢出正在出现，但在其他浏览器中，由于溢出而隐藏，但在safari中它不会被隐藏。

http://realestate.fssdemo.com/services/

Answer 1

删除样式

position: relative

并调整保证金

Answer 2

Overflow hidden css effect worked for all browsers example[***enter image description here***][1]

    <!-- HTML -->
<div class="menu-categories w-100">
<ul class="p-0">
<li>
<div class="outer_wrap">
<div class="inner_wrap position-relative"> <a href="#"> <img src="furniture.jpg" alt="Furniture" title="Furniture"> <span>
<label>
Furniture              </label>
</span> </a> </div>
</div>
</li>
<li>
<div class="outer_wrap">
<div class="inner_wrap position-relative"> <a href="#"> <img src="coffee.jpg" alt="Breakroom" title="Breakroom"> <span>
<label>
Breakroom              </label>
</span> </a> </div>
</div>
</li>
<li>
<div class="outer_wrap">
<div class="inner_wrap position-relative"> <a href="#"> <img src="janitorial-sanitation.jpg" alt="Cleaning<br> Supplies" title="Cleaning<br> Supplies"> <span>
<label>
Cleaning<br> Supplies              </label>
</span> </a> </div>
</div>
</li>
<li>
<div class="outer_wrap">
<div class="inner_wrap position-relative"> <a href="#"> <img src="office-supplies.jpg" alt="Office<br>Supplies" title="Office<br>Supplies"> <span>
<label>
Office<br>Supplies              </label>
</span> </a> </div>
</div>
</li>
<li>
<div class="outer_wrap">
<div class="inner_wrap position-relative"> <a href="#"> <img src="technology.jpg" alt="Technology" title="Technology"> <span>
<label>
Technology              </label>
</span> </a> </div>
</div>
</li>
<li>
<div class="outer_wrap">
<div class="inner_wrap position-relative"> <a href="#"> <img src="inkToner.png" alt="Ink &amp; Toner Finder" title="Ink &amp; Toner Finder"> <span>
<label>
Ink &amp; Toner Finder              </label>
</span> </a> </div>
</div>
</li>
</ul>
</div>

.menu-categories ul li div.inner_wrap:hover,.outer_wrap .inner_wrap{-webkit-transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}.menu-categories ul{width:100%;list-style:none}.menu-categories ul li{display:inline-block;width:200px;margin:15px 7px;height:200px}.menu-categories ul li div.outer_wrap{width:100%;height:100%;text-align:center;padding:0}.outer_wrap .inner_wrap{width:90%;height:90%;padding:5%;border:1px solid #ccc;cursor:pointer;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;overflow:hidden}.menu-categories ul li div img{width:auto;height:auto;max-width:70%;padding:15%;-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;transition:all .4s linear}.menu-categories ul li div span{position:absolute;bottom:0;width:100%;left:0;right:0;height:50px;background:rgba(0,0,0,.7);color:#fff;font-size:16px;line-height:inherit;display:table}.menu-categories ul li div label{display:table-cell;height:50px;line-height:inherit;vertical-align:middle;padding:0 20%}.menu-categories ul li div.inner_wrap:hover{border:1px solid #003664;-webkit-transition:all 250ms ease-out 50ms;-moz-transition:all 250ms ease-out 50ms;-o-transition:all 250ms ease-out 50ms;transition:all 250ms ease-out 50ms}.menu-categories ul li div:hover span{background:rgba(0,54,100,.7)}.menu-categories ul li div:hover img{-webkit-transform:scale(1.1);transform:scale(1.1)}.menu-categories ul li div.janitorial span{line-height:20px}:root .menu-categories ul li div span,_::-moz-svg-foreign-content{left:inherit;right:inherit;width:100%}*|html[xmlns*=""] .menu-categories ul li div span{left:inherit;right:inherit;width:100%}

它将在所有浏览器中正常运行，请尝试现场演示enter link description here

Safari中无法使用溢出功能

2 个答案: