IE中两个相邻div之间的奇怪差距

时间:2013-03-14 15:57:17

标签: html css internet-explorer

我在使用div的IE中遇到了麻烦。下面给出了在FF和IE中查看的一组div的两个图像。

Div alignment in FF

Div alignment in IE

您可以在边框处看到出现白线。 我正在动态创建这个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正在接受它。

等式

  

(cellWidth / 4) - 1

在FF中给出11.5而在IE中它是11。

请帮忙。

提前致谢。

1 个答案:

答案 0 :(得分:0)

您好尝试将此添加到父元素。

font-size: 0