Радиус границы IE11 и ошибка границы

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


(источник: jonwallacedesign.biz )

Обратите внимание на странный эффект в углах белой кнопки "ПОЧЕМУ ИСПОЛЬЗОВАТЬ НАС" 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;

css internet-explorer-11
person dubbs    schedule 25.02.2014    source источник
comment
Я замечал это время от времени с тех пор, как они впервые добавили поддержку border-radius в IE.   -  person moribvndvs    schedule 25.02.2014
comment
Возможно, это: stackoverflow.com/questions /21935209/странная-граница-цвет-проблема/   -  person Paulie_D    schedule 25.02.2014
comment
Любопытно, почему вы используете фоновое изображение с реальным изображением вместо градиентов CSS3?   -  person Bram Vanroy    schedule 25.02.2014
comment
Как насчет рисования границ с помощью box-shadow и использования линейного градиента для браузеров, которые его понимают? codepen.io/anon/pen/wlJca   -  person G-Cyrillus    schedule 25.02.2014
comment
Использование изображения BG гораздо более совместимо с разными браузерами! Я думаю, что выпуски CSS3 очень грязные!   -  person dubbs    schedule 25.02.2014
comment
В дополнение к тому, что сказал @BramVanroy, здесь находится ресурс, который показывает, как делать CSS-градиенты, включая префиксы поставщиков, которые поддерживают IE 6+. Вероятно, максимальная поддержка, которая вам понадобится сейчас.   -  person War10ck    schedule 25.02.2014
comment
Я тоже сталкиваюсь с этим в IE11 и Microsoft Edge в Windows 10. Однако я не могу воспроизвести в IE11 в Windows 8.1. Я использую сплошные цвета фона, никаких причудливых градиентов или чего-то подобного.   -  person Bryan Corey    schedule 19.08.2015
comment
Мне интересно, ориентированы ли это на устройство или графику в более новых окнах. Я видел, как это происходило на моем телевизоре с яркими настройками видео, но не на моем настольном компьютере или ноутбуке.   -  person darcher    schedule 04.10.2015
comment
Вы пытались дать ему свойство box-sizing:border-box?   -  person Deepak Yadav    schedule 16.12.2015
comment
можете ли вы загрузить свое фоновое изображение и поделиться рабочей скрипкой.. или фрагментом в самом SO   -  person Deepak Yadav    schedule 21.12.2015
comment
@BryanCorey, я также сталкиваюсь с этой проблемой в IE11 на win10. край вроде работает. это происходит во всем моем приложении, которое представляет собой либо сплошную заливку, либо границы 1-2 пикселя (поля, входы и т. Д. Все это демонстрируют) - очень раздражает. ты разобрался?   -  person Dave    schedule 12.09.2017

Ответы (6)


arrow_upward
8
arrow_downward

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

фоновый клип: padding-box;

person Nee Lu    schedule 15.04.2017

arrow_upward
1
arrow_downward

Решение:

<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>
person kavita    schedule 20.09.2017

arrow_upward
0
arrow_downward

Пожалуйста, попробуйте это внутри условного блока 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;

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

person Optimum Creative    schedule 28.01.2016

arrow_upward
-1
arrow_downward

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

person Kapeesh Manilal    schedule 27.01.2016

arrow_upward
-2
arrow_downward

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

person dubbs    schedule 25.02.2014
comment
У меня точно такая же проблема, но моя кнопка уже использует сплошной фоновый цвет. Я вижу эти странные линии с левой стороны каждого элемента, для которого я установил радиус границы. Какой у вас был полный код исправления? - person jhned; 01.03.2014
comment
У меня такая же проблема со сплошным фоном. Я бы тоже не прочь увидеть решение. - person freshyill; 10.02.2015

arrow_upward
-2
arrow_downward

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

person Abramova    schedule 31.01.2016
comment
Этот ответ был дан почти на 20 минут раньше вашего. - person Ason; 02.02.2016