html - 線形グラデーション (矢印/三角形) は Google Chrome でのみ機能します

Question

これは私が試したことです：

http://codepen.io/helloworld/pen/DkgbF

Chrome v28では線形グラデーション (白い三角形/矢印) が機能しますが、Windows の IE10、FF22、または Safari 5.1.7 では機能しないため、Google Chrome を使用してペンを監視してください。

このようにGoogle Chromeで表示されます：

グーグルクロームでしか動かないのはなぜ？

  <ul class="_7/5Z" style="display: table; height: 100%; float: left; font-size: 7px;background:green;">
                <li style="list-style: none;background:blue; display: table-row;">

                    <div style="height: 99%;padding-left:1%;padding-top:1%;">

                        <div style="background: red; width: 50%; height: 100%; float: left;">
                            <div style="height: 100%;" class="segmentTriangle"></div>
                        </div>

                        <div class="fontsize vertical-center" style="font-size:20px;height: 100%; background: yellow; width: 50%; float: left;">33333
                        </div>

                    </div>
                </li>

            </ul>



body, html {
    width: 100%;
    height: 100%; 
    font-family: arial;
    /*overflow: hidden;*/
}

* { /* Every element which has a border or padding value puts this value inside the div */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

._7\/5Z {
    width: 17.50%;
}

.horizontal-right {
    text-align: right;
}

.horizontal-center {
    text-align: center;
}

.vertical-center {
    vertical-align: middle;
}

.segmentTriangle {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, white 50%, transparent 50%);  
    background: -o-linear-gradient(to right bottom, white 50%, transparent 50%); 
    background: -moz-linear-gradient(to right bottom, white 50%, transparent 50%); 
    background: -webkit-linear-gradient(to right bottom, white 50%, transparent 50%); 
    background: -ms-linear-gradient(to right bottom, white 50%, transparent 50%); 
}

アップデート

詳しくは：

データをhtmlにデータバインディングするためにknockoutjsを使用しています。ここで、私の ul-tag に foreach バインディングがあり、ul 内のすべてがすべての li-tag を意味し、その内容が 7 回繰り返されていると想像してください。あなたがよりよく理解できるコードサンプルで私の初期質問を更新しました。私のコードを使用して、li-tag とそのコンテンツの 7 つのコピーを作成し、これらすべてを ul-tag 内に貼り付けて foreach ループを模倣すると、最新の display:table-cell 回避策がすべてを壊すことがわかります。それが役立つことを願っています。:)

このサンプルを参照してください: http://codepen.io/helloworld/pen/gfeqK