Html 线性渐变（箭头/三角形）仅适用于谷歌浏览器

这就是我尝试过的：

请使用谷歌chrome观看画笔，因为在chrome v28中，线性渐变（白色三角形/箭头）起作用，但在IE10、FF22或windows上的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%); 
}

33333


正文，html{
宽度：100%；
身高：100%；
字体系列：arial；
/*溢出：隐藏*/
}
*{/*每个具有边框或填充值的元素都将该值放入div中*/
框大小：边框框；
-moz框大小：边框框；
填充：0；
保证金：0；
}
._7\/5Z{
宽度：17.50%；
}
.水平右侧{
文本对齐：右对齐；
}
.水平中心{
文本对齐：居中；
}
.垂直中心{
垂直对齐：中间对齐；
}
.分段三角形{
宽度：100%；
身高：100%；
左：0px；
顶部：0px；
背景：线性渐变（至右下角，白色50%，透明50%）；
背景：-o-线性梯度（至右下角，白色50%，透明50%）；
背景：-莫兹线性梯度（至右下角，白色50%，透明50%）；
背景：-webkit线性渐变（至右下角，白色50%，透明50%）；
背景：-ms线性梯度（至右下角，白色50%，透明50%）；
}

更新

更多信息：

我使用knockoutjs将数据绑定到html。现在想象一下，我的ul标签有一个foreach绑定，ul内部的所有内容都意味着每个li标签及其内容重复7次，因为这是我的要求。我已经用一个代码示例更新了我的init问题，您可以更好地理解它。只需使用我的代码，制作7份li标签及其内容的副本，并将所有这些粘贴到ul标签内，以模拟foreach循环，然后您将看到最新的显示：表格单元格解决方案打破了一切。希望有帮助。：）

---

请参见此示例：

在父节点C中使用

行高

在哪个父节点中，以及到什么值？在此div中

行高必须等于高度和

位置：相对然后垂直对齐可以工作我在FF22中尝试过，但它不工作。行距破解在这里不起作用，因为高度不是一个固定的px值，它是一个百分比值，类似于14.2%（参见父div的html样式高度），在运行时通过敲除js绑定动态设置。@Elisa您可以尝试添加
height:100%到您的
li
标签？当我加上这一点时，它对我很有用。