изображения перекрытия границы в сафари

У меня есть разбиение на страницы с номерами в кругах, при наведении на окружности, соответствующее изображение будет отображаться, но в сафари изображения накладывается границей круга под ..изображения перекрытия границы в сафари

Скрипка: - http://jsfiddle.net/2yx5e3w1/

CSS и HTML

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

<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>

источник

2015-06-03 Dipesh Rana

выглядит хорошо для меня HTTP: // s30.postimg.org/5gkmar6yp/Screen_Shot_2015_06_03_at_12_24_00_AM.png –

В моем сафари: - http://postimg.org/image/67490hm29/ –

какая версия сафари? –

Дайте радиус границы от 100% как к образу и контейнера

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

также отметить, что Safari для Windows, была прекращена, начиная с 9 мая 2012 года

источник

2015-06-03 07:45:57

мы не можем дать радиус границы для изображения, потому что изображение может быть меньше круга или оно может быть прямоугольным –

изображения перекрытия границы в сафари

ответ

Смежные вопросы