0

http://techmobile.com/contact-usTESTBOX.htmlの検索ボックスとページの右端の間に1〜2ピクセル幅のギャップがあるのはなぜですか？

検索ボックスのまったく同じコードがhttp://techmobile.com/open-service-call.html にあり、このページにギャップはありません。

私は解決策を探すのに2時間半以上費やしました。

#container #search #searchbox_left   { background-image: url("../images/stories/search_left.gif"); background-repeat: no-repeat; width: 5px; height: 45px; float: left }
#container #search #searchbox_right   { background-image: url("../images/stories/search_right.gif"); background-repeat: no-repeat; width: 6px; height: 45px; float: left }
#container #search #searchbox_area {
float: left;
font: 12px Arial, Helvetica, sans-serif;
background-color: #000000;
height: 33px;
min-width: 410px;
width: auto !important;
width: 410px;
padding: 12px 10px 0px 10px;
color: #FFFFFF;
}
4

3 に答える 3

4

containerdivにはtable2行のがあります。td2行目にそれぞれ1px幅の2つの余分なスペースがあるページ。

<div id="container">
<table width="960" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<td width="1" valign="top">
<td valign="top" align="left">
<td width="1" valign="top"> </td>
<td width="1" valign="top"> </td>
<td width="1" valign="top">

これらの下部のセルは、

<div id="container">
<table width="960" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<td width="1" valign="top">
<td valign="top" align="left">
<td width="1" valign="top">

ページ上で正しくレンダリングされます。

編集

解決策が明確であることを確認するために、余分なtdsを削除するか、秒のどこかにcolspanを追加して、それらの余分なセルを含めると、間隔が調整されます。

于 2012-11-14T16:55:55.923 に答える
1

Mookamafoobの答えは、問題を修正する1つの方法です。これは、スタイルではなくHTMLマークアップを使用することです。両方のページで、一番上の行の唯一の列は、その下の2番目の行に3つの列があると想定しています。

<td colspan="3" align="right">...</td>

「壊れた」ページには実際には2行目に5つの列があるため、ブラウザはどういうわけかそれらを処理する必要があります。さらに2つの列が空であるため、表示されている1つまたは2つのピクセルスペースにそれらを押し込みます。何らかの理由で、「壊れた」ページの一番下の行に余分な2つの列を保持する必要がある場合は、代わりに一番上の行のtdのcolspan属性を5に変更します。

于 2012-11-14T17:15:32.933 に答える
0

http://techmobile.com/contact-usTESTBOX.htmlの次の行（<tr>）に2つの余分なセル（<td>）があります。

  <tr>
    <td valign="top" width="1">...</td>
    <td align="left" valign="top">...</td>
    <td valign="top" width="1"></td>
    <td valign="top" width="1"></td>
    <td valign="top" width="1">...</td>
  </tr>

2つの解決策が可能です。

最初の解決策：「検索」行/セルのcolspanの値を3から5に変更します。

<td colspan="5" align="right"> ... </td>

2番目の解決策（より良い）：後続のテーブル行から3番目と4番目のセルを削除します。

  <tr>
    <td valign="top" width="1">...</td>
    <td align="left" valign="top">...</td>
    <td valign="top" width="1">...</td>
  </tr>

どちらも機能します。あなたのケースに最も適切なものを選択してください。

于 2012-11-14T17:38:27.193 に答える