border-radius создает контур в IE

Когда радиус границы применяется к цветному div с белой рамкой, цвет фона появляется за пределами белой границы в углах. Почему это происходит? (Пробовали ie9 и ie10).border-radius создает контур в IE

<div class="rounded"></div> 

.rounded { 
    display: inline-block; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    border: 3px solid #fff; 
    background: #f00; 
    width: 100px; 
    height: 100px; 
} 

body { 
    background-color: #fff; 
}

Дело здесь в том, что мне действительно нужно белую границу, поэтому удалить его или сделать его прозрачным, как некоторые из них предложили, это не вариант. Вот скрипку: http://jsfiddle.net/z0rt63e2/1/

источник

2014-10-20 tofu

вы можете показать нам jsfiddle или ссылку на страницу или что-то? так что мы можем видеть, что это за выражение? – Sai

Вы пробовали наброски: нет свойства css? – Sai

Наброски: нет эффекта – tofu

Как и в моем комментарии выше (в интересах ответа), используйте background-clip: content-box в своем классе .rounded.

Вот некоторые материалы для чтения: http://www.css3.info/preview/background-origin-and-background-clip/

источник

2014-10-20 20:54:57 disinfor

Неконтент-ящик, но заполняющий ящик сделал трюк. Вы были так близки, поэтому я принимаю ваш ответ. Благодаря! – tofu

@tofu Удивительный! Я рад, что ты заработал. Я помню, что сталкивался с той же проблемой, с которой вы столкнулись пару лет назад, и «контент-бокс» - это то, что я сделал для меня. – disinfor

Вы можете использовать border-color: transparent

.rounded { 
 
    display: inline-block; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -ms-border-radius: 50%; 
 
    border-radius: 50%; 
 
    border: 3px solid #fff; 
 
    background: #f00; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-color: transparent;/*Add border color transparent*/ 
 
} 
 
body { 
 
    background-color: #fff; 
 
}

<div class="rounded"></div>

источник

2014-10-20 15:01:02

Конечно, но я хочу границу;) – tofu

Я думаю, он хочет, чтобы граница границы 3px была видимой границей линии: 3px solid #fff; – Sai

попробуйте с прозрачным и скажите, подходит ли он вам. –

согласно этому сообщению ... Removing the image border in Chrome/IE9

попробовать,

border-style:none;

mayb это помогает?

UPDATE :: Я нашел эту ссылку .. http://css-tricks.com/removing-the-dotted-outline/

и в соответствии с ним (allthe путь вниз в нижней части), мы должны добавить мета-тег ..

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

IE = край должен работать и использовать последний механизм рендеринга.

источник

2014-10-20 15:12:10 Sai

border-radius создает контур в IE

ответ

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