Как получить радиус границы и фон градиента совместной работы в IE 9

Я использовал CSS для создания стиля кнопки, но у меня есть вопрос о IE9, он прекрасно работает на FirefoxКак получить радиус границы и фон градиента совместной работы в IE 9

код:

.my_box { 
    -moz-box-shadow:inset 0px 1px 0px 0px #f9eca0; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0; 
    box-shadow:inset 0px 1px 0px 0px #f9eca0; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e)); 
    background:-moz-linear-gradient(center top, #f0c911 5%, #f2ab1e 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e'); 
    background-color:#f0c911; 
    -webkit-border-top-left-radius:33px; 
    -moz-border-radius-topleft:33px; 
    border-top-left-radius:33px; 
    -webkit-border-top-right-radius:0px; 
    -moz-border-radius-topright:0px; 
    border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:33px; 
    -moz-border-radius-bottomright:33px; 
    border-bottom-right-radius:33px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-radius-bottomleft:0px; 
    border-bottom-left-radius:0px; 
    text-indent:0; 
    border:1px solid #e65f44; 
    display:inline-block; 
    color:#c92200; 
    font-family:Arial; 
    font-size:15px; 
    font-weight:bold; 
    font-style:normal; 
    height:40px; 
    line-height:40px; 
    width:100px; 
    text-decoration:none; 
    text-align:center; 
    text-shadow:1px 1px 0px #ded17c; 
}

см. FIDDLE

Как заставить его работать на IE9?

ПОЖАЛУЙСТА JSfiddle ответ

источник

2013-09-30 Muath

См http://stackoverflow.com/questions/5381446/ie9-border-radius –

проверьте, что вы установили '' DOCTYPE' в html' HTTP : //stackoverflow.com/questions/5381446/ie9-border-radius – hexblot

Проблемы с IE9 в стороне, я думаю, ваш синтаксис '' linear-gradient() '(https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) устарел (http://caniuse.com/#feat=css-gradients). – Passerby

Дайте элемент контейнера, с радиусом границы и установить переполнение контейнера скрыта, а также дать этому элементу границу:

HTML

<div class='rounded'> 
    <a href="#" class="my_box">TEXT</a> 
</div>

CSS

.rounded{ 
    -webkit-border-top-left-radius:33px; 
    -moz-border-radius-topleft:33px; 
    border-top-left-radius:33px; 
    -webkit-border-top-right-radius:0px; 
    -moz-border-radius-topright:0px; 
    border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:33px; 
    -moz-border-radius-bottomright:33px; 
    border-bottom-right-radius:33px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-radius-bottomleft:0px; 
    border-bottom-left-radius:0px; 
    overflow:hidden; 
    display:inline-block; 
    border:1px solid #e65f44; 
}

JSFiddle

Испытанный в IE 9

источник

2013-09-30 10:43:20 George

, который работал для меня, спасибо. – Muath

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

источник

2013-09-30 10:29:24 RiKo

CSS радиус границы будет работать, добавив в заголовок страницы,

<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
</head>

Убедитесь, что это находится в верхней части HTML документа

<!DOCTYPE html>

источник

2013-09-30 10:30:32

Вы можете использовать этот http://css3pie.com/ он будет работать для IE 6-9

источник

2013-09-30 10:32:02 steve

Попробуйте это:

-webkit-border-top-right-radius: 36px; 
-webkit-border-bottom-left-radius: 36px; 
-moz-border-radius-topright: 36px; 
-moz-border-radius-bottomleft: 36px; 
border-top-right-radius: 36px; 
border-bottom-left-radius: 36px;

вы можете создать радиус границы по border-radius.com

источник

2013-09-30 10:32:56

Попробуйте без фильтра

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');

Это может переопределить стиль.

Fiddle

источник

2013-09-30 10:39:34

Как получить радиус границы и фон градиента совместной работы в IE 9

ответ

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