这是我在stackoverflow上的第一个问题,希望它不会太蠢。 我一直在尝试找到一种方法来显示具有分裂事件日期的日历。 我想到的方法是使用SVG图形放置在具体的日历表格单元格中作为内联CSS的背景,以便于拆分具有分裂日的日期。 它在Firefox和Chrome中运行得非常好,但图形无法在Internet Explorer中显示(我尝试过9和10但没有11)。
该日历首先由JavaScript生成,然后通过向JSON数据中的目标单元格添加CSS类来放置事件。
以下是应用背景使用的CSS类的简短代码段,完整的示例与HTML在"fiddle"中:
.calendar td {
position:relative;
}
.calendar .split {
background-repeat:no-repeat;
background-position: top left;
background-size: 100% 100%;
}
.calendar .split.am_vaca{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 1,0 0,1' style='stroke-width:0; fill:lightgreen;' /></svg>");}
以下是HTML和CSS的代码,展示了问题:
在Firefox和Chrome中运行fiddle可以正确显示分割的日历,但是Internet Explorer 9、10 (11?)无法显示分割的日历。
我查看了类似的问题,例如下面这些链接,但是还没有找到明确的解决方案:
请问谁有在Internet Explorer中显示内联SVG作为背景图片的经验,或者有什么重要的事情我忽略了,也可能是我的方法不对。谢谢!