0

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

.post{
position:fixed;right:0px;top:0px;bottom:0px;width:48%;background:#fff;
color:black;box-shadow: -2px 2px 10px #1f1f1f;text-shadow:none;
overflow:auto;height:100%;z-index:99999
}

.imageStyle{width:45%;position:relative;background:#1f1f1f;
margin:0px;padding:0px;height:100%;z-index:5}

.post 内部是 Google Maps V3 的实现。在 IE 和 Firefox 中，地图按预期显示；当我在 .imageStyle div 中向下滚动时，.post 保持固定在它应该在的位置。但是，在 Chrome 中，当我在 .imageStyle 中向下滚动时，地图会停留在它应该在的位置，但 .post 的其余内容会随着 .imageStyle 滚动（或者表现得好像它是相对的）。

这特别奇怪，因为在我拥有这些 div 的所有其他页面上，.post 中的内容在所有浏览器上都表现正常。此外，此问题仅在 Chrome 中存在。

Google Maps 是由我的 IDX 供应商提供的 Google Maps V3 API 的实现。他们实现的 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 Maps API 本身或CSS为它。对此问题的任何和所有帮助将不胜感激。

编辑：另外，我想提一下，直到谷歌地图完成加载，问题才会出现。换句话说，如果您的连接速度很慢，或者您阻止了地图功能，您可以看到所有元素的行为正确，直到地图被加载。

4

1 回答 1

0

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

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

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

有趣的是，这是谷歌三年前就知道但仍未解决的问题（上面的解决方案直接来自谷歌的论坛：Issue 1411 Gmaps-api-issues）。

于 2013-05-28T16:30:58.380 回答