0

divテーブルにいくつかの画像を表示しようとしていますが、各画像の下部に境界線が表示され続けています。約2〜5ピクセルです。

画像を送信しますが、私は新しいユーザーです。

この境界線を削除したいと思います。

画像は正確に52x10です。

私はこのアプリのために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.
}

それは私のためにトリックをしました。幅を元に戻す必要があるかもしれませんが、それは不要だと思います。また、レイアウトを構築している場合を除き、すべてのテーブル/div 要素が必要な理由がわかりません...物事を複雑にしているように見えますか?

于 2013-01-09T22:05:49.330 に答える