Border-radius выделывается в IE, стороны округляет, но при этом не прячет содержимое углов

Klerikadm

Доброго времени суток Уважаемые форумчане. Просьба помочь с куском верстки. border-radius выделывается в IE, точнее он работает, стороны округляет, но при этом не прячет содержимое углов. overflow: hidden не помогает. Во всем шаблоне border-radius ведет себя хорошо, но тут не могу понять. И это только IE, даже IE 11 такое творит.
<nav class="small_menu">
        <ul>
            <li>
                <a href="#"><span>My account</span></a>
            </li>
            <li>
                <a href="#"><span>Compare</span></a>
            </li>
            <li>
                <a href="#"><span>Shopping cart</span></a>
            </li>
        </ul>
    </nav>
и CSS
.small_menu{
font-size: 1.1em;
float: left;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #7a7a7a;
margin: 34px 20px 0 0;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-ms-border-radius: 30px;
overflow: hidden;
background: rgb(245,245,245); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(245,245,245,1) 0%, rgba(207,207,207,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(207,207,207,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(207,207,207,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(207,207,207,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(207,207,207,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(245,245,245,1) 0%,rgba(207,207,207,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#cfcfcf',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-ms-border-radius: 30px;
 
}
 
.small_menu ul li{
padding: 5px 0px 6px 0px;
float: left;
border-right: 1px solid #999;
border-image:url(../img/border.png) 1;
}
 
.small_menu ul li:last-child{
border: none;
}
 
.small_menu ul li span{
display:block;
}
.small_menu ul li:first-child a{background: url(../img/spline.png) no-repeat; background-position: 0px -28px ;}
.small_menu ul li:last-child a{background: url(../img/spline.png) no-repeat; background-position: 0px 2px ;} 
.small_menu ul li:hover{background:#bfbfbf;}
.small_menu ul li:hover:first-child{-webkit-border-bottom-left-radius:15px; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.small_menu ul li:hover:last-child{border-bottom-right-radius: 15px; border-top-right-radius: 15px;}
.small_menu ul li a{
color: #535353;
text-decoration: none;
background: url(../img/spline.png) no-repeat;
background-position: 0px -13px;
display: block;
padding: 0 6px 0 21px;
}
3 ответа

Klerikadm

.small_menu ul li:first-child a{border-radius: 30px 0 0 30px;}
.small_menu ul li:last-child a{border-radius: 0 30px 30px 0;}


Klerikadm

неа, не помогает, пробовал. Можно переназначить background с div на li и назначить oveflow: hidden , но тогда hover не работает.


Klerikadm

Вот, что показывает IE11.