求助：IE11无法完美渲染CSS圆形的解决方法

嘿，这个IE11的半像素裁切bug我之前也踩过坑！老IE在处理圆角元素的渲染时，确实会有这种莫名其妙的边缘截断问题，尤其是当元素尺寸为偶数的时候更容易触发。给你几个亲测有效的解决方案：

方案1：改用百分比圆角代替固定值 #

虽然你提到调整参数没用，但可以试试把固定的border-radius:15px改成border-radius:50%。有时候IE11对百分比圆角的渲染逻辑和固定像素值不一样，说不定能绕过这个bug：

.button {
  width:30px;
  height:30px;
  border-radius:50%; /* 替换固定像素值 */
  background-color:white;
}

方案2：添加微小的内边距或边框 #

给元素加一个1px的透明边框或者极小的内边距，让IE11的渲染引擎有更多“空间”来绘制完整的圆形：

.button {
  width:30px;
  height:30px;
  border-radius:15px;
  background-color:white;
  border:1px solid transparent; /* 透明边框 */
}

如果用内边距的话，建议配合box-sizing:border-box，避免元素尺寸变大：

.button {
  width:30px;
  height:30px;
  border-radius:15px;
  background-color:white;
  padding:1px;
  box-sizing:border-box;
}

方案3：触发硬件加速 #

通过transform属性触发IE11的硬件加速，强制它重新渲染元素，有时候能解决这类渲染偏差问题：

.button {
  width:30px;
  height:30px;
  border-radius:15px;
  background-color:white;
  transform: translateZ(0); /* 触发硬件加速 */
}

方案4：调整元素尺寸为奇数 #

虽然你说尺寸大小没影响，但可以试试把宽高改成31px，配合border-radius:50%，IE11对奇数尺寸的元素渲染偶尔会更稳定：

.button {
  width:31px;
  height:31px;
  border-radius:50%;
  background-color:white;
}

这些方法里，我自己用得最多的是方案2和方案3，基本上能解决大部分IE11的圆角渲染问题。你可以挨个试试，看哪个对你的场景最适用～

内容的提问来源于stack exchange，提问作者fritzmg