Css 如果列视图标题为空,则标题不会填充IE中的全部大小

Css 如果列视图标题为空,则标题不会填充IE中的全部大小,css,xpages,Css,Xpages,如果没有屏幕截图,这个问题很难描述 我使用此css在xpages中设置了视图的列视图标题样式,只是为了在所有浏览器中获得渐变效果: .xspPanelViewColumnHeader { background: #58a8cd; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+

如果没有屏幕截图,这个问题很难描述

我使用此css在xpages中设置了视图的列视图标题样式,只是为了在所有浏览器中获得渐变效果:

.xspPanelViewColumnHeader {
       background: #58a8cd; /* Old browsers */
       /* IE9 SVG, needs conditional override of 'filter' to 'none' */
       background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU4YThjZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBjODNiMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzBmNmM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMjdkYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
       background: -moz-linear-gradient(top,  #58a8cd 0%, #0c83b2 50%, #0f6c95 51%, #127daa 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58a8cd), color-stop(50%,#0c83b2), color-stop(51%,#0f6c95), color-stop(100%,#127daa)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa  100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* IE10+ */
       background: linear-gradient(to bottom,  #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* W3C */
       background-position: left top;
       color: #FFFFFF;
       padding: 4px 4px 4px 4px;
       font-weight: bold;
 }
到目前为止效果很好。但是如果列视图标题没有标签,那么IE9(不是Firefox)中的渐变就有问题

在IE9中,渐变并没有填满标题的全部大小——我可以看到两个块(一个水平块和一个垂直块),但两个块都只有几个像素宽。但列标题的其余部分保持白色

只要我输入一个标签(即使它只是一个“.”),标题就会像往常一样显示(带渐变的全高和全宽)

这种方式有效:

<xp:viewColumnHeader id="viewColumnHeader1" value="."></xp:viewColumnHeader>

这并不是:

<xp:viewColumnHeader id="viewColumnHeader1"></xp:viewColumnHeader>


因此,问题是(如果有人能理解我的描述):我如何编辑css以防止列标题在没有定义标签的情况下收缩?

您是否可以调用客户端javascript并检查innerhtml是否为空,然后添加一个不间断的空格。我知道,要让IE正常工作似乎很痛苦。但即使我添加了一个不间断的空间,问题依然存在。它只在我添加一个字母或任何其他字符时起作用