0

私のHTMLには、テーブルセルごとに分離された画像で構成されるこのテーブルセットアップがあります。div の下部に < hr /> ブレークがあり、テーブルを残りのコンテンツから分離しています。Chrome でテストすると正しく表示されますが、Firefox では改行が正しく配置されず、数ピクセル押し上げられます。

2番目の問題は画像です。2 番目と 3 番目のテーブル セルの間には、幅約 2 ピクセルの空白のギャップがあり、画像を分離しています。

これがブラウザの互換性の問題かどうかは正確にはわかりませんが、どうすれば修正できますか?

http://jsfiddle.net/Fe7DC/ - コードを使用した JSfiddle

<div class="fade" id="Latest-Stories">
               <h3 class="section-header"> Son Xəbərlər </h3>
                     <table id="stories-preview" width="330" height="598" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                   <td id="tablecell1"><a id="link_1"> <img id="img1" src="NewsBarAZ/Article-Nav-Bar2_01.gif"  alt="" /></a></td>
                            </tr>
                            <tr>
                                   <td id="tablecell2"><a id="link_2" ><img id="img2"  src="NewsBarAZ/Article-Nav-Bar1_02.gif" alt="" /> </a></td>
                            </tr>
                            <tr>
                                   <td id="tablecell3"><a id="link_3" ><img id="img3" src="NewsBarAZ/Article-Nav-Bar1_03.gif"  alt="" /></a></td>
                            </tr>
                            <tr>
                                   <td id="tablecell4"><a id="link_4" ><img id="img4" src="NewsBarAZ/Article-Nav-Bar1_04.gif" alt="" /></a></td>
                            </tr>
                            <tr>
                                   <td id="tablecell5"><a id="link_5" ><img id="img5" src="NewsBarAZ/Article-Nav-Bar1_05.gif" alt="" /></a></td>
                            </tr>
                     </table>
   </div>
   <hr />
#Latest-Stories {
    width:1000px;
    height:598px;
    padding-bottom:36px;
    background-color:#FFF;
    padding-left:20px;
}
#stories-preview {
    float:right;
    border-left:2px groove;
    border-right:2px groove;
    border-top:2px groove;
    border-bottom:1px solid #9A9A9A;
}
4

2 に答える 2

1

私は非表形式のデータにテーブルを使用するのが好きではないと言わなければなりません。おそらくここではリストの方が適切でしょう。しかし、それは問題のほかにあります。

hrの実装はブラウザに大きく依存するため、ほとんど使用しません（IEでテストを開始するまで待ちます...）。私のアドバイスは、それを.hrのクラスのdivに置き換え、cssで希望に合わせてスタイルを設定することです。

例：

<div class='.hr'></div>

.hr {
  padding-top: 5px;
  border-bottom: 1px solid #000;
  margin-bottom: 5px;
}

デフォルトの境界線に満足できない場合は、小さな画像を使用してx軸に沿って繰り返すこともできます。ただし、この場合、divにある程度の高さを与えることを忘れないでください。

画像間のギャップについては、すぐに説明することはできません。おそらくそれは実際の画像と関係があり、上部または下部にいくつかの透明なピクセルがある可能性があります。ただし、実際の画像がないとわかりません。

于 2012-08-07T22:10:45.997 に答える
0

通常、hr 要素に CSS スタイルを追加します。

line-height: 0.01;  
height: 1pt;  
border: 1pt solid black;  
border-width: 0 0 1pt 0;  
background: transparent;

また、セルと行の間の誤った間隔の問題を回避するために、通常、ソース コードのタグの間からすべての空白を省略します。はい、読みにくくなりますが、一部のブラウザは動作を拒否します.

于 2012-08-14T21:49:01.553 に答える