我在 IE 中遇到了 div 的问题。下面给出了在 FF 和 IE 中查看的一组 div 的两个图像。
您可以看到边框处出现一条白线。我正在动态创建这个 div。
<DIV style="WIDTH: 49px" class=ganttview-grid-row-cell sizset="36" sizcache07230265382227504="352">
<br/>
<DIV style="TEXT-ALIGN: center; WIDTH: 11px" class=ganttview-grid-row-cell-partition></DIV>
<br/>
<DIV style="TEXT-ALIGN: center; WIDTH: 11px" class=ganttview-grid-row-cell-partition></DIV>
<br/>
<DIV style="TEXT-ALIGN: center; WIDTH: 11px" class=ganttview-grid-row-cell-partition></DIV>
<br/>
<DIV style="TEXT-ALIGN: center; WIDTH: 11px" class="ganttview-grid-row-cell-partition last"></DIV><br/></DIV>
上面给出的是为 div 动态生成的代码。为 div 定义的类如下所示：
div.ganttview-grid-row-cell {
float: left;
/* IE problem */
position:relative;
/*top: 0;
left: 0;*/
z-index:0;
}
div.ganttview-grid-row-cell-partition {
border-right : 1px dotted #6B6659;
font-size: 150%;
color: black;
height: 21px;
line-height: 120%;
float : left;
}
div.ganttview-grid-row-cell-partition.last {
border-right: none;
margin-right: 0px;
}
我在所有 IE 版本中都有这个差距。不知道我哪里出错了。我确实找到了与此相关的其他问题并尝试了所有但它不起作用。例如
1）添加
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
在头部标签中。
2) 将位置设置为绝对
3）将边距填充所有内容设置为零。
经过一些测试后添加更多点。如前所述，这些是动态创建的 div，下面给出了 jquery 中如何创建它的代码。
for(var z = 1 ; z <= 4 ; z++ ) {
$i5MinPartition = jQuery("<div>",
{
"class": "ganttview-grid-row-cell-partition",
"css": { "width": ((cellWidth/4) - 1) + "px", "text-align": "center"}
});
if(bgData[count] && bgData[count].workloadValue >= j) {
$i5MinPartition.css({"background": "#669900"});
}
if(bgData[count] && bgData[count].scheduleAllocationValue >= j) {
$i5MinPartition.text('x');
}
cellDiv.append($i5MinPartition);
count++;
}
这里的 cellWidth 是 50。现在我发现 IE 没有采用十进制的宽度值，而 Firefox 采用了它。
方程
(单元格宽度/4) - 1
在 FF 中为 11.5，而在 IE 中为 11。
请帮忙。
提前致谢。