空白正被添加到IE9中的叠加层中，但不会添加到Fx5中

Question

我正在尝试在Google Maps API V3上叠加“搜索框”。覆盖在Fx5中工作正常，但在IE9中它不能正常工作。 IE9在地图和灰色div之间添加了一些空白区域。要查看差异，请转到：

http://www.trailheadfinder.com/trail_search/trail_map

“搜索框”应与Map / Sattelite / MyTopo按钮对齐。

HTML

<div id="maplayers">
 Select information to be shown:
 Trails: <input type="checkbox" id="trailsbox" onclick="boxclick(this,'trails')" />
 Campgrounds: <input type="checkbox" id="campgroundsbox" onclick="boxclick(this,'campgrounds')" />
 Panoramio: <input type="checkbox" id="panoramiobox" />
</div>
<div>
 <div id="mapsearchbar">
  <input id="searchTextField" type="text" size="50">
 </div>
 <div id="map" style="width: 100%; height: 500px"></div>
</div>

CSS

<style type="text/css">
#mapsearchbar {
 float: right;
 position: relative;
 right: 200px;
 top: 5px;
 z-index: 999;
}
#maplayers {
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 margin-top: 20px;
 background-color: #C4C4C4;
}
</style>

Answer 1

差距是存在的，因为你给它一个相对位置，然后抵消使用top：5px;右：200px。这导致它移动但在其原始位置留下间隙。请执行以下操作。

div
{
position: relative;
}

div#mapserachbar
{
position: absolute;
top: 5px;
right: 170px;
}

并从中移除浮动：