IE Обходное решение? border-radius + background-color + border = bleeding background

Question

Кажется, что-то вроде этого было рассмотрено ранее, но большая часть того, что я нахожу, касается более общей проблемы, которая сегодня не имеет отношения к большинству браузеров. Я встречаюсь с known IE issue, где с помощью border-radius с рамкой и фоном (цвет в моем случае) приводит к фону кровотечение за пределами границы.

мне интересно, если есть обходной путь, который на самом деле может маскировать этот вопрос ... Некоторые из вещей, которые я пробовал:

• <meta http-equiv="X-UA-Compatible" content="IE=10" />
• overflow:hidden на материнской
• background-clip:border-box
• добавления .1 к border-radius

Ни один из т он работал. Есть ли другой способ обхода (кроме использования изображений), пока я жду, когда команда IE IE исправит ситуацию?

Я создал a fiddle, который иллюстрирует этот колодец и документирует то, что я нашел более подробно.

Answer 1

Заимствования из ответа Зеев, который перемещает background-color к :before или :after (который только заменяет пробел субпиксель для субпикселя кровоточить, и через несколько браузеров), и ответ Фила, который перемещает border к :after (который на самом деле это не проблема).

Перемещение background-color к :before как предложил Зеев, но дать ему обивку равно border-width минус два (или используйте calc()). Затем дайте ему отрицательное значение top и left с таким же количеством.

Затем переместите border к :after, но дать ему отрицательную top и left позиционирование, равное border-width.

Это создает негабаритный фон и освежает его ниже содержания. Затем он создает негабаритную границу и центрирует ее вокруг содержимого. Возможно, вы можете увеличить размер фона до других степеней и получить тот же результат. Дело в том, чтобы сделать это больше, чем отверстие внутри граница, но меньше, чем снаружи границы. Это, естественно, потерпит неудачу с тонкими границами.

body { 
 
    background: white; 
 
} 
 
.bluebox { 
 
    background: blue; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.redcircle { 
 
    z-index: 1; 
 
    position: absolute; 
 
    left: 150px; 
 
    top: 50px; 
 
    text-align: center; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100px; 
 
    font-size: 100px; 
 
    line-height: 100px; 
 
    color: black; 
 
} 
 
.redcircle::before, 
 
.redcircle::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 100%; 
 
} 
 
.redcircle::before { 
 
    z-index: -1; 
 
    background: red; 
 
    top: -8px; 
 
    left: -8px; 
 
    padding: 8px; 
 
} 
 
.redcircle::after { 
 
    top: -10px; 
 
    left: -10px; 
 
    border: 10px solid yellow; 
 
}

<div class="bluebox"> 
 
    <div class="redcircle"> 
 
    ! 
 
    </div> 
 
</div>

Answer 2

Я испытал это раньше.

Я рекомендую вместо стилизации границы с CSS контента, таким образом, как это:

.redcircle::after { 
    content:''; 
    display:block; 
    left:0; 
    top:0; 
    right:0; 
    bottom:0; 
    border-radius:100px; 
    border:10px solid yellow; 
    position:absolute; 
    pointer-events: none; //ensures no clicks propogate if this is desired 
} 

Answer 3

Вы можете обрешетку ::before или ::afterCSS Псевды и сделать свой background: red; на них. Установите ширину, высоту и радиус границы на 100% и, например, не измените значение z-index на -1, вы увидите, что он получает внутреннюю ширину и высоту и не истекает кровью.

---

• Скриншот из Explorer 9 на Виста

---

И теперь, например (как его внешний вид без г-индексного воспроизведения):

body { 
 
    background: white; 
 
} 
 

 
.bluebox { 
 
    background: blue; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.redcircle { 
 
    position: absolute; 
 
    left: 140px; 
 
    top: 40px; 
 
    text-align: center; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100px; 
 
    font-size: 100px; 
 
    line-height: 100px; 
 
    color: black; 
 
    border: 10px solid yellow; 
 
} 
 

 
.redcircle::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 100%; 
 
    background: red; 
 
}

<div class="bluebox"> 
 
    <div class="redcircle"> 
 
    ! 
 
    </div> 
 
</div>

---

И это один для использования:

body { 
 
    background: white; 
 
} 
 

 
.bluebox { 
 
    background: blue; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.redcircle { 
 
    z-index: 1; 
 
    position: absolute; 
 
    left: 140px; 
 
    top: 40px; 
 
    text-align: center; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100px; 
 
    font-size: 100px; 
 
    line-height: 100px; 
 
    color: black; 
 
    border: 10px solid yellow; 
 
} 
 

 
.redcircle::before { 
 
    z-index: -1; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 100%; 
 
    background: red; 
 
}

<div class="bluebox"> 
 
    <div class="redcircle"> 
 
    ! 
 
    </div> 
 
</div>

Fiddle Demo