图像重叠边境在野生动物园

Question

我对圆圈中的数字进行分页，当您将鼠标悬停在圆圈上时会显示相应的图像，但在safari中，图像与圆圈的边框重叠。

小提琴： - http://jsfiddle.net/2yx5e3w1/

CSS和HTML

＆＃13;

＆＃13;

 * {
    	margin: 0;
    	padding: 0;
    }
    ul li {
    	list-style: none;
    }
    a {
    	text-decoration: none;
    }
    .pagination_wrap * {
    	box-sizing: border-box;
    }
    .pagination_wrap {
    	float: left;
    	width: 680px;
    	box-sizing: border-box;
    	position: relative;
    }
    .pagination_wrap ul {
    	display: table;
    	text-align: center;
    	width: 620px;
    	margin: auto;
    }
    .pagination_wrap li {
    	display: table-cell;
    	vertical-align: middle;
    }
    .pagination_wrap li a {
    	display: block;
    	width: 51px;
    	height: 51px;
    	border-radius: 50%;
    	border: 2px solid #dadada;
    	background: #e2e2e2;
    	margin: auto;
    	overflow: hidden;
    }
    .pagination_wrap li a:after {
    	content: "";
    	display: inline-block;
    	height: 100%;
    	margin-left: -4px;
    	vertical-align: middle;
    	width: 0;
    }
    .pagination_wrap li img {
    	display: none;
    	margin-left: -4px;
    	vertical-align: middle;
    }
    .pagination_wrap li span {
    	vertical-align: middle;
    	display: inline-block;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #000;
    	font-size: 19px;
    	line-height: 47px;
    }
    .pagination_wrap li a:hover img, .pagination_wrap li.current img {
    	display: inline-block;
    }
    .pagination_wrap li a:hover span, .pagination_wrap li.current span {
    	display: none;
    }
    a.prev_arrow, a.next_arrow {
    	height: 25px;
    	width: 15px;
    	background-image: url("http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/slide_nav.jpg");
    	position: absolute;
    }
    a.prev_arrow.disabled {
    	background-position: left -28px;
    	cursor: default;
    }
    a.next_arrow.disabled {
    	background-position: right -28px;
    	cursor: default;
    }
    a.prev_arrow {
    	float: left;
    	background-position: left top;
    	left: 0;
    	top: 12px;
    }
    a.next_arrow {
    	float: right;
    	background-position: right top;
    	right: 0;
    	top: 13px;
    }

＆＃13;

<div class="pagination_wrap">
      
        <ul>
            <li class="current"><a href="#"><img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /><span>1</span></a></li>
            <li><a href="#"><span>2</span> <img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /></a></li>
            <li><a href="#"><span>3</span> <img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /></a></li>
        </ul>
   
    </div>


   

＆＃13;

＆＃13;

＆＃13;

Answer 1

为图像和容器

提供100%的边框半径

.pagination_wrap li a,
.pagination_wrap li a img {
        -webkit-border-radius: 100%;
        border-radius: 100%;
}

另请注意，自2012年5月9日起，Safari for Windows已停止使用。