css - 空白被添加到 IE9 中的叠加层中，但 Fx5 中没有

Question

我正在尝试在 Google Maps API V3 上覆盖一个“搜索框”。覆盖在 Fx5 中工作正常，但在 IE9 中它不能正常工作。 IE9 在 map 和灰色 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;
}

并从中删除 float:right。