Question

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

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

我花了超过两个半小时寻找解决方案。

#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;
}

Answer 1

在container div中，table有两行。带有额外空格的页面，作为第二行中的两个额外td s，每个宽度为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，要么在第二个地方添加一个colspan以包含那些额外的单元格来处理间距。

Answer 2

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

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

由于“破损”页面实际上在第二行中有五列，因此浏览器必须以某种方式处理它们 - 并且由于两个额外的列是空的，它只是将它们挤压到您看到的一个或两个像素空间。如果由于某种原因，您需要在“损坏”页面的最后一行中保留额外的两列，只需将顶行的td的colspan属性更改为5。

Answer 3

http://techmobile.com/contact-usTESTBOX.html上的后续行（＆lt; tr＆gt;）中有2个额外的单元格（＆lt; td＆gt;）：

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

两者都有效。选择最适合您案例的那个。

CSS Float - 1px Gap两页完全相同的代码

3 个答案: