0

Foxfire で完全に動作し、IE9 で驚くほど動作する次のコードについて助けが必要です。

FF では、ページ全体に高さ約 25 ピクセルの 2 色の帯 (表の行) が生成されます。（ギャップが存在する場所を確認するためだけに、たくさんのがらくたの背景色を使用しました。そして、すべてのCSSで同じ効果が得られることを知っています...しかし、後で右に追加する必要がある他のセルがあります。 cssでレンダリングするので、あきらめて、今のところ「単純な」表の行に逃げました。)

テーブルは、class="tabs-block"> の div に含まれています。
(これは、テーブルの幅を 100% にするために必要でした。何らかの理由で、クラスの代わりに id を入れたときに同じ設定が機能しませんでした。理由はわかりません。)

行の左半分 (セル 1) は -- 空のセル (コンテンツなし、font-size が 0px に設定) -- 下に 25 ピクセルの白い境界線があり、右に 25 ピクセルの青の境界線があります (上にも左にもありません) - - コンテンツがないため表示されるべきではない白い背景の ORANGE があり、ある場合は高さが 0pt になります。FFでは表示されません。IE9 では、数ピクセル幅の上部が見えます。（スクリーンショットを添付できればいいのですが、私は新しすぎます。）

バンドの右側 (セル 2) は -- 背景が青色のセルです -- 境界線はありません -- そして、テキストが 12 ポイントの白の単一のリンクが含まれています

ホワイト (左) のブルー (右) のセルは、中央で 45 度の線で結ばれているように見えます。

問題: FF はリンク テキストをセル 2 の下部に配置します。IE9 はリンク テキストをセル 2 の空のテキスト領域に配置します。つまり、IE9 はセル 2 のテキストをセル 1 の境界線の上部に配置します。セル 2 の下部ではありません。これにより、セル 2 の下に空白のギャップが残ります = (25px マイナス 12pt) 高さ。

何日も完全に敗北した後、私の目は交差し、助けを歓迎します.

.tabs-block > table {
   background-color: white;
   text-align: right;
   width: 100%;}

table#tabs-table {
      border-collapse:collapse;
      width:100%;}

tr#tabs-row-1 {
  padding: 0px;
  margin:0px;
  border-spacing: 0px;
  background-color:red;}

<div class="tabs-block" style='background-color: green;'>
  <table cellspacing = '0px'
         cellpadding = '0px'  
         id='tabs-table;'>
     <tr id='tabs-row-1'>          
       <td style='width:50%;
                  margin:0px;
                  padding:0px;
                  background-color: orange;
                  border-style: solid;
                  border-color: #000066 #000066 #FFFFFF red;
                  border-width: 0px 25px 25px 0px;'
                  class='text-blue-0'></td>            
       <td style='width:1px; 
                  margin:0px;
                  padding:0px;
                  border:0px;
                  background-color: #000066;
                  white-space:nowrap;'
                  class='title-white-12'>                         
         <a href='contact.jsp'  class='title-white-10'
            style='vertical-align:bottom;
               height:100%;
               background-color: #000066; 
               padding:0px;
               margin:0px; 
               border:0px;'>
           Contact Us
         </a>
      </td>     
    </tr>
  </table>
</div>
4

1 に答える 1

0

これを読んだだけで目が回りました。コンテンツが表形式のデータであり、テーブルを使用してサイトをレイアウトできないと仮定すると、さまざまな境界線を使用してあらゆる種類の垂直方向の配置を実現する唯一の方法は、vertical-align: middle.

好みの配置ではないかもしれませんが、これがベスト ショットです。ただし、同じテーブルに異なる太さの境界線が必要な理由は不思議です。スタイルを単純化すると、問題が解決する場合があります。

于 2013-10-26T03:18:22.833 に答える