Question

我的两个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＆amp; Firefox，Map按预期显示;当我在.imageStyle div中向下滚动时，.post保持固定在它应该是的位置。但是，在Chrome中，当我在.imageStyle中向下滚动时，地图会保持原来的位置，但.post的其余内容会滚动.imageStyle（或表现得好像是相对的）。

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

Google地图是我的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。对此问题的任何和所有帮助将不胜感激。

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

Answer 1

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

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

这解决了我对固定div的问题，但现在我无法“移动”通过地图（例如：如果我正在看迈阿密，佛罗里达州，我尝试点击并拖动地图，它会移动但是永远不会加载新的地图区域。）

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

仅限Chrome：当其他div滚动时，固定Div w / Google Map滚动

1 个答案: