0

我正在尝试在 div 表中显示一些图像，但我一直在每个图像的底部获得边框。大约2-5像素。

我会发送图像，但我是新用户。

我想删除这个边框。

图像正好是 52 x 10。

我只为这个应用程序在 IE8 中。

编辑：我正在做一个更大的布局 - 我只是将代码归结为我遇到的一个问题，即表格底部的边框。

/*tables*/
.WorkFlowTableStyleA
{
    display: table;
    width: 10px; 
    border-collapse:collapse;
    border-style: none;  
}


/*rows*/
.WorkflowRowStyleA
{
    display: table-row;
    height: 52px;

}

/*arrow containers*/
.WorkflowCellArrowHolderA
{
    display: table-cell;
    width: 10px ;
}


<div class="WorkFlowTableStyleA">   
<div class="WorkflowRowStyleA">
<div class="WorkflowCellArrowHolderA" style="background-color: Black;">
<img src="../../Images/Flowchart/spacerTestTenByFiftyTwo.png" />

</div>
</div>
</div>

<div class="WorkFlowTableStyleA">   
<div class="WorkflowRowStyleA">
<div class="WorkflowCellArrowHolderA" style="background-color: Black;">
<img src="../../Images/Flowchart/spacerTestTenByFiftyTwo.png" />

</div>
</div>
</div>
4

1 回答 1

1

MadHenchbot 对“边界”的来源很感兴趣。这不是边框，而是您的 div 中未填充的空间。（更改为 style="background-color: Red"）以验证这一点。

好消息是，因为听起来图像已经是你想要的大小了，我认为有一个快速修复：

/*tables*/
.WorkFlowTableStyleA
{
    display: table;
    /* get rid of width: 10px; */
    border-collapse:collapse;
    border-style: none;   
}


/*rows*/
.WorkflowRowStyleA
{
    /* get rid of display: table-row; */
    height: 52px;
}

/*arrow containers*/
.WorkflowCellArrowHolderA
{
    /* get rid of display: table-cell; */
    /* get rid of width: 10px; */
    height: 52px;                             <--- Add this to set the div height.
}

这对我有用。您可能必须重新设置宽度，但我猜这是不必要的。另外，除非您正在构建布局，否则我不确定您为什么需要所有 table/div 的东西......看起来它只是让事情复杂化？

于 2013-01-09T22:05:49.330 回答