Question

以前似乎已经解决过这样的问题，但我发现的大部分内容都是针对当今大多数浏览器都不具备的更通用的问题。我遇到known IE issue使用带有边框和背景的border-radius（在我的情况下是一种颜色）会导致背景流血超出边界。

我想知道是否有一种解决方法可以掩盖这个问题...我尝试过的一些事情：

<meta http-equiv="X-UA-Compatible" content="IE=10" />
overflow:hidden
background-clip:border-box
将.1添加到border-radius

这些都没有奏效。还有其他的解决方法（除了＆＃34;使用图像和＃34;）我等待IE团队解决问题吗？

我创建的a fiddle很好地说明了这一点并记录了我发现的更详细信息。

Answer 1

我以前经历过这个。

我建议用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 2

您可以创建::before或::after CSS Pseudo ，然后对其进行background: red;。将您的宽度，高度和边界半径设置为100％，例如，不要将z-index更改为-1，您可以看到他获得内部宽度和高度，并且不会流血。< / p>

Vista

资源管理器9

现在例如（没有z-index的外观如何播放）：

＆＃13;

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

＆＃13;

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

＆＃13;

这个用于：

＆＃13;

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

＆＃13;

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

＆＃13;

<强> Fiddle Demo

Answer 3

借用Zeev的答案，将background-color移动到:before或:after（仅用子像素间隙代替子像素出血，以及更多浏览器），以及Phil的回答，它将border移动到:after（这并没有真正解决问题）。

按照Zeev的建议将background-color移至:before，但将其填充等于border-width减去2（或使用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 4

background-clip修复了此问题：

.bluebox {   
   background-clip: padding-box;
}

IE解决方法？ border-radius + background-color + border =流血的背景

4 个答案: