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

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

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

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

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

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

 Michael Irigoyen11 янв. 2011 г., 03:19
IE9 - это бета-продукт. Это означает, что в продукте все еще могут быть ошибки, которые могут негативно повлиять на представление кода.
 Evan Mulawski11 янв. 2011 г., 00:42
Это только в IE9? Если нет, можете ли вы опубликовать немного CSS?
 SLaks11 янв. 2011 г., 00:45
Конечно, это только в IE9. IE8 не поддерживаетborder-radius.
 adamyonk11 янв. 2011 г., 00:46
Да, только IE9. Webkit / Firefox работает правильно. Обновлю пост с CSS.
 Nasir14 янв. 2011 г., 11:44
Я не понимаю, почему команда IE9 не удалила фильтр: прогид ... градиент и заменила его на фон: градиент (линейный, 0% 0%, 0% 100%, из (# 4b90e5), в (# 0e4b94)); ... обычный CSS ... так, как должно было быть с самого начала

Ответы на вопрос(5)

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

 Jordan Wallwork31 мая 2011 г., 01:49
Кроме того, извините, я хочу ответить на то, что сказал @Nasir, но пока не могу - однако команда IE сказала, что они еще не поддерживают функции css3, потому что спецификации css3 еще не завершены. он довольно слабый, но они в основном планируют «наверстать упущенное» и правильно реализовать css2, прежде чем они начнут использовать «экспериментальные» технологии. пока css3 не станет стандартом, нас ждет множество разочарований, спрашивающих "почему они не ...?"

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

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

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

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

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

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

ь этот код для отключения фильтра в IE9:

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

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

Ваш ответ на вопрос