0

为什么我在http://techmobile.com/contact-usTESTBOX.html上的搜索框和页面右边缘之间出现 1-2 像素宽的间隙？

搜索框的完全相同的代码在http://techmobile.com/open-service-call.html上 ，这个页面没有差距。

我花了超过 2 1/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 中table有两行。td第二行有两个额外空格的页面，每个 1px 宽。

<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">

在页面上正确呈现。

编辑

只是为了确保解决方案是明确的，要么删除额外td的 s ，要么在第二个某处添加一个 colspan 以包含那些额外的单元格来处理间距。

于 2012-11-14T16:55:55.923 回答
1

Mookamafoob 的回答是解决问题的一种方法，即使用 HTML 标记而不是样式：在两个页面上，您的顶行唯一的列假定它下面的第二行有三列，其中：

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

由于“损坏”页面实际上在第二行中有五列，因此浏览器必须以某种方式处理它们——而且由于额外的两列是空的，它只是将它们压缩到您看到的一两个像素空间中。如果出于某种原因，您需要在“损坏”页面的底行保留额外的两列，只需将顶行的 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>

两种解决方案是可能的。

第一个解决方案：将“搜索”行/单元格中的 colspan 值从 3 更改为 5：

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

第二种解决方案（更好）：从后续表格行中删除第 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 回答