Css 仅限Chrome：修复了当其他Div滚动时，带有谷歌地图的Div滚动

我的两个div有问题。其中一个是固定（.post），另一个是相对（.imageStyle）：

post的内部是GoogleMapsV3的一个实现。在IE和Firefox中，地图按预期显示；当我在.imageStyle div中向下滚动时，.post将固定在它应该在的位置。但是，在Chrome中，当我在.imageStyle内部向下滚动时，.post的其余内容将与.imageStyle一起滚动（或者表现为它是相对的）

这尤其奇怪，因为在我使用这些div的其他页面上，.post中的内容在所有浏览器上都能正常运行。此外，这个问题只在Chrome中存在

GoogleMaps是我的IDX供应商提供的GoogleMapsV3API的一个实现。其实现的CSS如下所示：

/*** Map Search (Template #1) ***/
#IDX-propTypeTextLinks {display:none;}
#IDX-searchNavWrapper {margin:5px auto; text-align:left;position:relative;}
#IDX-mapPropertyTypes {float:left; width:192px;}
#IDX-mapPropertyTypes select {border:1px #AAA solid; float:left; width:182px;}

/* This link allows a user to save a map search directly */
#IDX-saveMapSearch {float:left;}
#IDX-googleMap {width:100%; height:600px; clear:both; position:relative;  overflow:hidden; border:1px #000  solid; margin:10px 0;}

/* This holds the informational text regarding the number of properties found in a     given search */
#IDX-mapInfo {width:400px; height:14px; margin:5px 0 5px 0; float:left; left:5px; font-size:11px; text-align:left;}

/* The controls float near the google map and add additional features to the core  Google Controls */
#IDX-mapControls {padding:0px; margin:0px;/*width:97px;*/ height:100%;  position:relative; top:0; left:0;/* background:url(/images/layout/mapSearch/20- controlBg.jpg) top left repeat-y; border-right:1px #AAA  solid;*/visibility:hidden;display:none;height:0px;width:0px;}
#IDX-mapContainer {color:#000; background:#E5E3DF  url(http://www.idxco.com/images/layout/gload.gif) top center no- repeat;width:100%;height:602px;}
#IDX-mapContainer a:link, #IDX-mapContainer a:hover, #IDX-mapContainer a:active, #IDX-mapContainer a:visited {color:#000;}

/* The mapWithContainer should normally be #IDX-googleMap width minus #IDX-mapControls width minus border width. In this case, 560 - 96 - 3 = 472px */
.IDX-mapWithContainer {width:464px; height:360px; position:relative; top:0; left:0px;}
.IDX-mapWithoutContainer {width:100%; height:100%;}
#IDX-mapOverlay {width:150px; height:50px; position:absolute; top:10px; right:10px; z-index:500; display:none; background:url(/images/layout/mapSearch/overlay.gif);}


/* Mode switching allows the map to be drawn with different tilesets */
.mapTypeButton {cursor:pointer; margin:0; padding:0; border:0;}
#IDX-modeRow {width:96px; height:131px; position:relative; clear:both; background:url(/images/layout/mapSearch/20-modeBg.jpg);}
#IDX-mapTypeMap {width:76px; height:20px; position:absolute; top:34px; left:10px; background:url(/images/layout/mapSearch/20-modeMap.jpg);}
#IDX-mapTypeSat {width:76px; height:20px; position:absolute; top:56px; left:10px; background:url(/images/layout/mapSearch/20-modeSat.jpg);}
#IDX-mapTypeHyb {width:76px; height:20px; position:absolute; top:78px; left:10px; background:url(/images/layout/mapSearch/20-modeHyb.jpg);}
#IDX-mapTypeTer {width:76px; height:20px; position:absolute; top:100px; left:10px; background:url(/images/layout/mapSearch/20-modeTer.jpg);}

/* The following CSS controls the general search controls */
#IDX-searchForm {margin:0; padding:0;}
#IDX-searchBoxWrapper {width:555px; height:60px; clear:both; margin:0; padding-bottom:20px;}
#IDX-searchBox {width:500px; height:55px; margin:0 auto; float:left; position:relative; left:97px;}

/* This container should be as large as the #IDX-googleMap declaration (minus borders, of course) */
#IDX-mapBasicBox {width:100%;height:600px}
#IDX-mapBasicBox input, #IDX-mapBasicBox select {border:1px #AAA solid;}
#lowPrice, #highPrice, #sqFt, #daysOnMarket, #acres {width:100px;}

/* These elements will be display and need CSS */
#IDX-mapMinPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapMaxPrice {float:left; width:110px; height:40px; margin-top:4px;}

#IDX-mapSearchAcres {display:none; float:left; width:110px; height:40px; margin-top:4px;}

#IDX-mapSearchBedRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBathRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms select {width:100px;}
#IDX-mapSearchBathRooms select {width:100px;}
#IDX-mapSearchHelpText {clear:both; text-align:center; font-size:8pt;    filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;visibility:hidden;}

我试过调整上面提到的div和Map CSS的位置，但似乎无法在Chrome中运行。目前我假设这个问题与Google地图API本身或它的CSS有关。在此问题上的任何和所有帮助都将不胜感激

---

编辑：另外，我想提到的是，直到谷歌地图加载完毕，这个问题才会出现。换句话说，如果您的连接速度较慢，或者如果您阻塞了map函数，则可以看到所有元素在加载map之前都正常工作。

因此，在继续搜索之后，我找到了一个可以追溯到近三年前的部分解决方案。显然，问题在于webkit：

*{-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;}

这解决了我使用fixed div时遇到的问题，但现在我无法在地图中“移动”（例如：如果我在佛罗里达州迈阿密市，尝试单击并拖动地图，它会移动，但不会加载新地图区域）

有趣的是，谷歌三年前就意识到了这一问题，但至今仍未解决（上述解决方案直接来自谷歌论坛：1411问题Gmaps api问题）

*{-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;}