2013-05-16 69 views
0

我有我的两个divs的问题。其中之一是固定的(。员额),另一种是相对的(.imageStyle):Chrome浏览器:固定Div w /谷歌地图滚动时,其他div滚动

.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的是谷歌地图V3的实现。在IE & Firefox中,地图按预期显示;当我向下滚动.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的位置和地图的CSS调整并不能似乎得到它在Chrome.At工作,我假设的那一刻该问题与Google Maps API本身或其CSS有关。任何和所有这个问题的帮助将不胜感激。

编辑:此外,我想提到的问题不会出现,直到谷歌地图已完成加载。换句话说,如果您的连接速度很慢,或者如果您阻止了地图功能,则可以看到所有元素的行为都正确,直到地图加载完成。

回答

0

因此,继续搜索后,我发现了一个可以追溯到近三年的部分解决方案。显然,问题是与WebKit的:

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

这解决我有固定的div的问题,但现在我不能“动”通过地图(例如:如果我期待在迈阿密,佛罗里达州和我尝试点击并拖动地图,它会移动,但不会加载新的地图区域)。

有趣的是,这是一个谷歌三年前意识到的问题,但仍然没有解决(上面的解决方案直接来自谷歌的论坛:Issue 1411 Gmaps-api-issues)。