我有我的两个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有关。任何和所有这个问题的帮助将不胜感激。
编辑:此外,我想提到的问题不会出现,直到谷歌地图已完成加载。换句话说,如果您的连接速度很慢,或者如果您阻止了地图功能,则可以看到所有元素的行为都正确,直到地图加载完成。