Радиус границ IE11 и пограничная ошибка

У меня есть нечетная визуальная ошибка в IE11, как вы можете видеть здесь.

http://www.jonwallacedesign.biz/ie11.png

См. нечетный эффект на углах белой кнопки "ПОЧЕМУ ИСПОЛЬЗОВАТЬ США" li....

Комбинация border-radius, background-image и border: 1px solid #colour, похоже, создает этот нечетный ужасный эффект.

Кто-нибудь знает решение для исправления?

CSS li:

background-image: url("../images/core/primnavItemBG_sprite.png");
background-position: 0 0;
border: 1px solid #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
color: #2062AF;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-size: 14px;
margin-right: 5px;
outline: medium none;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;

Ответ 1

Это сработало для меня. Я не уверен, есть ли у вас такая же проблема, как и я. Я получал легкий белый буровщик по углам.

background-clip: padding-box;

Ответ 2

Попробуйте это внутри условного блока CSS.

background-image: url("../images/core/primnavItemBG_sprite.png");
border: 1px solid #FFFFFF; /*In Border color use color same as background color otherwise use border-size:0*/
box-shadow: none;
outline: none;

надеюсь, что это исправит вашу проблему.

Ответ 3

Это известная ошибка, которая может быть решена путем включения IE11 в режим совместимости IE10, в котором border-radius работает нормально.

Вставьте <meta http-equiv="X-UA-Compatible" content="IE=10" /> в head.

Ответ 4

Решение:

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

<style>
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
</style>

Ответ 5

Вместо фонового изображения, почему бы не использовать http://css3buttongenerator.com/, чтобы воссоздать эту кнопку и сохранить любые дополнительные запросы и время загрузки. Я смог заново создать вашу кнопку и ваш градиент просто отлично в IE 11 с использованием вышеупомянутого генератора. Изображение прилагается; Изображение кнопки

Ответ 6

Вы включаете режим IE10, добавляя <meta http-equiv="X-UA-Compatible" content="IE=10" /> в головной блок и работаете нормально.

Ответ 7

Добавление сплошного цвета BG в IE10 + исправлено... похоже, что ошибка IE пытается отобразить биты CSS3...