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

@Klerikadm · Регистрация: 02.12.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток Уважаемые форумчане. Просьба помочь с куском верстки. border-radius выделывается в IE, точнее он работает, стороны округляет, но при этом не прячет содержимое углов. overflow: hidden не помогает.

Во всем шаблоне border-radius ведет себя хорошо, но тут не могу понять. И это только IE, даже IE 11 такое творит.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.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;
}

@Academik · 29.01.2014, 04:12

CSS
1
2
.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 · 29.01.2014, 20:24 **[ТС]**

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

@monochromer · 29.01.2014, 21:05

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

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

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@Klerikadm 0 / 0 / 0 Регистрация: 02.12.2013 Сообщений: 8
	29.01.2014, 20:24 [ТС]
	неа, не помогает, пробовал. Можно переназначить background с div на li и назначить oveflow: hidden , но тогда hover не работает. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	29.01.2014, 21:05
	Вот, что показывает IE11. 0