html - IE 中两个相邻 div 之间的奇怪间隙

标签 html css internet-explorer

我在 IE 中遇到 div 问题。下面给出了在 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"/>

在 head 标签中。

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。

请帮忙。

提前致谢。

最佳答案

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

font-size: 0

关于html - IE 中两个相邻 div 之间的奇怪间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15414108/

相关文章:

css - 创建新的列类 xlarge

html - ie8+支持的分割背景色

internet-explorer - 'pagerror.gif' 的意义?

javascript - 显示选择 5 星级

html - 当网页很短时,为什么我的固定元素不可见?

jquery - 我无法使用jquery获取css属性的值

css - 位置 :fixed breaks in IE9

jquery - CSS 不影响特定元素

jquery - 无法使用 jQuery 删除动态添加的内容

html - Fabricjs HTML5 Canvas : Why are images so poorly resized?