Ошибка с радиусом границы <a>в IE9 - PullRequest
Новая
       0

Ошибка с радиусом границы <a>в IE9

13 голосов
/ 11 января 2011

Видя, что элементы <div> правильно отображают border / border-radius, но любые <a> или <button>, для которых заданы background, border и border-radius, отображают цвет фона или изображение в виде квадрата, и толькограница круглаяПопытка установки <a> & <button> в display: block или display: inline-block, но это не сработало.

Есть ли известный обходной путь?

Вот ссылка на вычисленный стильиз Webkit: https://gist.github.com/773719

alt text

Вот вычисленный стиль из инструментов разработчика IE9: alt text

Обновление Использование фильтра:;или -ms-фильтр :;свойство иметь градиенты в IE, чтобы фон вырвался из заданного border-radius.

Ответы [ 5 ]

3 голосов
/ 06 июня 2011

Решение состоит во вложении градиента в другой элемент с радиусом границы И переполнением.Это не идеально, но это все css.без хаков.

Помимо этого, использование фонового изображения работает очень хорошо, например, 

<div class="corner">
   <div class="grad">button</div>
</div>


<style>
.corner,
.grad{
   height:50px;
   width:250px;
   }
.corner{
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   overflow:hidden;
   }
.grad{
   border:1px #659300 solid;
   background: #659300; /* old browsers */
   background: -moz-linear-gradient(top, #659300 0%, #6F9B00 50%, #528200 51%, #6CA501 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#659300), color-stop(50%,#6F9B00), color-stop(51%,#528200), color-stop(100%,#6CA501)); /* webkit */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1cc00', endColorstr='#518e00',GradientType=0 ); /* ie */
   }
</style>
3 голосов
/ 21 февраля 2011

Я нашел это отличное сообщение в блоге, которое показывает, как вы можете использовать SVG-градиентные спрайты для решения этой конкретной проблемы: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

1 голос
/ 11 февраля 2011

Бегу к этому тоже.Градиент, основанный на «фильтре», на самом деле не является фоновым изображением, так как с градиентами CSS3 это дополнительный слой.Команда IE, очевидно, не успела обрезать эти слои фильтра до закругленных углов.Странно, потому что совершенно очевидно, что люди будут делать такие кнопки.

Сопоставление унаследованных функций с новыми должно быть болезненным.Для них может быть лучше просто реализовать градиенты в CSS.Я бы лучше добавил префикс, чем устаревшие фильтры.

0 голосов
/ 28 августа 2012

Я использую Ultimate CSS Gradient Generator. Рекомендуется использовать этот код для отключения фильтра в IE9: 

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Это должно решить вашу проблему.

0 голосов
/ 31 мая 2011

Одним из решений для этого является использование CurvyCorners , решение javascript.Он работает вплоть до IE6, но борется с градиентным фоном.Однако, если вы используете фон с цветным блоком, он будет работать нормально и обрабатывает все типы границ, которые я рассматривал до сих пор.На веб-сайте написано, что вам нужно вызывать его, но почему-то я обнаружил, что это работает просто путем включения .js и использования атрибутов css3 border-radius в css.

...