css - IE8 的背景剪辑修复

Question

我正在使用background-clip: content-box;方形框（Metro Style）的响应式布局。

该background-clip属性用于显示每个框之间的假边距，以便在调整浏览器大小时，边距保持不变。

我正在努力寻找一个破解/修复来让这个属性在 IE8 中工作。我试过 Pie HTC 但这似乎并没有影响盒子。

这是我在 IE8 中的问题的基本 jsfiddle：http: //jsfiddle.net/MgcDU/4393/

Answer 1

不幸的是 IE6-IE8 不支持圆角边框。相反，您需要使用 CSS3PIE 之类的东西。

但是 IE9 可以理解

 border-radius

这是一个快速的分步说明（这是一个非常简单的高级示例。

1. 在http://css3pie.com/download-latest下载 CSS3PIE
2. 将 .htc 文件保存在站点的根目录中
3. 假设你有一个 id 为 foo 的 div：

<div id="foo">Hello, I'm rounded</div>

您的 CSS 可能是：

#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
       -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
       border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  }
You simply need to add one more rule to the bottom of that CSS, as follows behavior: `url(/PIE.htc);`

这将导致 CSS3 将您的边框半径规则应用于 IE6-8。

Answer 2

没关系，我通过添加一个内部 div 并将背景设置div.box为透明来解决这个问题！

谢谢。