Question

我有一个使用Google自定义搜索引擎的网页。我想让它更漂亮，所以我创建了一个围绕区域的包装器，基本上将搜索区域设置为圆角矩形。为此，我使用以下代码：

<table style="height:33px;" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-image:url(/leftEdge.png); height:33px; width:5px;">&nbsp;</td>
    <td style="background-image:url(/bg.png); height:33px; background-repeat:repeat-x;">
      <form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
        <input type="hidden" name="cref" value="" />
        <input type="hidden" name="ie" value="utf-8" />
        <input type="hidden" name="hl" value="" />
        <input name="q" type="text" size="32" />
        <input type="submit" name="sa" value="Search" />
      </form>

      <script type="text/javascript" 
        src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
    </td>
    <td style="background-image:url(/rightEdge.png); height:33px; width:5px;">&nbsp;</td>
  </tr>
</table>

此代码在Chrome中看起来不错。但是，在Internet Explorer中，rightEdge图像显示在下一行。似乎IE正在添加换行符。但是，我不知道如何摆脱它。到目前为止，我尝试过：

将我的文档类型更改为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
添加以下CSS：form { margin: 0; padding: 0; }

我不知道还能做什么。有人可以帮我解决这个问题吗？

谢谢！

Answer 1

我不是桌子的粉丝所以我用CSS和DIV重新制作它：

<div style="height:33px; width:290px">
    <div style="background-image:url(/leftEdge.png); height:33px; width:5px; float:left;margin:0; padding:0;"></div>
    <div style="background-image:url(/rightEdge.png); height:33px; width:5px; float:right;margin:0; padding:0;"></div>

    <div style="background-image:url(/bg.png); height:33px; background-repeat:repeat-x;margin:0; padding:0;">
      <form name="cse" id="searchbox_demo" action="http://www.google.com/cse" style="margin:0; padding:0;">
        <input type="hidden" name="cref" value="" style="margin:0; padding:0;" />
        <input type="hidden" name="ie" value="utf-8" style="margin:0; padding:0;" />
        <input type="hidden" name="hl" value="" style="margin:0; padding:0;" />
        <input name="q" type="text" size="32" style="margin:0; padding:0;" />
        <input type="submit" name="sa" value="Search" style="margin:0; padding:0;" />
      </form>

      <script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
    </div>
</div>

有点脏，但我希望它会有所帮助。

FORM标记在IE中创建了一个不需要的换行符

1 个答案: