Wierd Gap between two adjacent div in IE

Question

I am having a trouble in IE with divs. Given below are two images of a set of divs viewed in FF and IE.

You can see a white line appearing in the place of border. I am creating this divs dynamically.

<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>

Given above is the dynamically generated code for the divs. The classes defined for the div are given below:

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;

}

I am having this gap in all the IE versions. Dont know where i am going wrong. I did find other questions related to this and tried all but its not working. For eg

1) adding

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>

in head tag.

2) setting position to absolute

3) setting margin padding everything to zero.

Adding some more points after some testing. As said earlier these are dynamically created divs, given below is the code in jquery of how it is created.

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++;
            }

The cellWidth here is 50. Now i found that IE is not taking decimal values for width whereas firefox is taking it.

The equation

(cellWidth/4) - 1

gives 11.5 in FF whereas in IE it is 11.

Please help.

Thanks in advance.

Answer 1

嗨，尝试将其添加到父元素。

font-size: 0