CSS3Pie with Angularjs - 使用 ng-repeat 指令时，CSS3Pie 的效果仅适用于第一个元素答案

【问题标题】：CSS3Pie with Angularjs - The effects of CSS3Pie are applied only to first element when using ng-repeat directiveCSS3Pie with Angularjs - 使用 ng-repeat 指令时，CSS3Pie 的效果仅适用于第一个元素
【发布时间】：2014-04-11 12:44:30
【问题描述】：

我们的 Web 应用程序是使用 Angularjs 构建的。我有一个 HTML 页面，我在其中使用 ng-repeat 指令构建了一个包含多行的表。每行包含一个按钮。按钮有圆角和渐变色。

我们必须支持 IE8，因此我决定利用 CSS3Pie 来获得与现代浏览器相同的外观。我正在使用 htc 文件（不是 js 版本），一切都很顺利，直到我遇到了 ng-repeat 的问题。根据需要只显示第一行的按钮，其他保持旧的方形样式，没有渐变。这是截图的链接：Table column with buttons

当我在 IE 开发者工具中查看时，我发现第一行按钮的源代码如下：

<CSS3-CONTAINER style="Z-INDEX: auto; POSITION: absolute; DIRECTION: ltr; TOP: 46px; LEFT: 1125px">
   <BACKGROUND style="POSITION: absolute; TOP: 0px; LEFT: 0px">
   <GROUP2>
   <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "1000,1000">
      <css3vml:fill></css3vml:fill>
      <css3vml:fill></css3vml:fill>
   </css3vml:shape>
   </GROUP2>
   </BACKGROUND>
   <BORDER style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "1000,1000">
         <css3vml:stroke></css3vml:stroke>
         <css3vml:stroke></css3vml:stroke>
      </css3vml:shape>
   </BORDER>
</CSS3-CONTAINER>
<css3-container style="Z-INDEX: auto; POSITION: absolute; DIRECTION: ltr; TOP: 46px; LEFT: 1119px" jQuery1110014396690653581418="155" href="#/admin/competences/edit/385">
   <background style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <group2>
         <?xml:namespace prefix = css3vml ns = "urn:schemas-microsoft-com:vml" />
         <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "72,44" coordorigin = "1,1" fillcolor = "#660" stroked = "f" path = " m0,6 qy6,0 l66,0 qx72,6 l72,38 qy66,44 l6,44 qx0,38 x e">
            <css3vml:fill></css3vml:fill>
            <css3vml:fill></css3vml:fill>
         </css3vml:shape>
      </group2>
   </background>
   <border style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "72,44" coordorigin = "1,1" filled = "f" stroked = "t" strokecolor = "#616100" strokeweight = ".75pt" path = " m1,6 qy6,1 l66,1 qx71,6 l71,38 qy66,43 l6,43 qx1,38 x e">
         <css3vml:stroke></css3vml:stroke>
         <css3vml:stroke></css3vml:stroke>
      </css3vml:shape>
   </border>
</css3-container>
<BUTTON class="btn btn-primary btn-xs pie_first-child " type=submit data-ui-sref="admin.competences.edit({competenceId:competence.id})" _pieId="_52">edit</BUTTON>

对于第二行，CSS3Pie 生成的部分代码丢失了，如下块所示：

<CSS3-CONTAINER style="Z-INDEX: auto; POSITION: absolute; DIRECTION: ltr; TOP: 46px; LEFT: 1125px">
   <BACKGROUND style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <GROUP2>
         <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "1000,1000">
            <css3vml:fill></css3vml:fill>
            <css3vml:fill></css3vml:fill>
         </css3vml:shape>
      </GROUP2>
   </BACKGROUND>
   <BORDER style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "1000,1000">
         <css3vml:stroke></css3vml:stroke>
         <css3vml:stroke></css3vml:stroke>
      </css3vml:shape>
   </BORDER>
</CSS3-CONTAINER>
<BUTTON class="btn btn-primary btn-xs pie_first-child" type=submit data-ui-sref="admin.competences.edit({competenceId:competence.id})" jQuery1110014396690653581418="163" _pieId="_52" href="#/admin/competences/edit/907">edit</BUTTON>

我想知道是否有解决方案可以按要求进行。

我曾考虑使用 javascript 版本的 CSS3Pie，但在此之前，我想确定使用 CSS3Pie 的 htc 版本不可能实现我的目标。

【问题讨论】：

标签： angularjs internet-explorer-8 css3pie

【解决方案1】：

最近，我遇到了类似的问题。我们的应用使用PIE在IE8中实现圆角和阴影效果。当我通过 ng-repeat 生成 HTML 时，圆角/阴影效果在 IE8 中消失了。

经过一些测试，我意识到这是因为当元素被附加到 PIE 时，ng-repeat 还没有被渲染。所以我将 PIE 附加代码移到了页面末尾：

if (window.PIE) {

    jQuery(function () {
        jQuery('round-corner').each(function () {
            PIE.attach(this);
        });
    });

然后一切正常。希望这会有所帮助。

【讨论】：