当前位置：首页 → 问答吧 → IE7 和IE6 这个定位的问题大家能解决一下吗？

IE7 和IE6 这个定位的问题大家能解决一下吗？

时间：2010-10-19

来源：互联网

现在在制作一个类似与
http://ouwenz.artician.com/portfolio/Bulls-on-Parade/ 右边的滚动条
不同的是我的每一个滑动块都是relative的定位在IE6 下和 IE7 把遮罩给覆盖了有什么方式能解决吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>sadf</title> <style> body{-x-system-font:none;font-family:Hei ,'Microsoft YaHei', Verdana, Arial;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin:0 auto;padding:0;color:#000;overflow-x:hidden;background:#3F374E url(http://www.guaiyix.com/image/bg.jpg) repeat-x fixed 0 0;} div{padding:0;} ul{overflow:hidden} a{text-decoration:none;color:#333;outline-style:none;outline-width:medium;} .collection_item{width:160px;text-align:center;} .collection_item_c,.work_item_c{width:150px;background:#ECE1F2;border:2px solidd #ddd;opacity:1.0;display:block;cursor:pointer;height:102px;display:block;margin:5px;-webkit-border-top-right-radius:2px;-webkit-border-top-left-radius:2px;-webkit-border-bottom-left-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-radius:5px 5px 5px 5px;} .collection_item_c{} .collection_item,.work_item{margin:0px;float:left;height:140px;margin:6px 2px 8px 5px;position:relative;} .collection_item input.common_text_stiny,.work_item input.common_text_stiny{margin-left:25px;float:left;margin-right:5px;} .del_album,.del_art,.del_upload,.del_download{background:transparent url(http://www.guaiyix.com/image/gif/close.gif) no-repeat 2px 5px;cursor:pointer;position:absolute;right:-8px;top:-5px;width:20px;height:20px;display:none;z-index:1000} .del_art{right:-12px;top:-12px;} .collection_item_t,.work_item_t{margin-top:5px;} a.scroll_flow_left,a.scroll_flow_right,a.scroll_flow_left_off,a.scroll_flow_right_off{display:block;float:left;height:60px;width:42px;margin-top:40px;border-color:#D8730C;background:url(http://www.guaiyix.com/image/gif/l_r2.gif) no-repeat scroll -1px 0px;} a.scroll_flow_right,a.scroll_flow_right_off{float:right;margin-right:3px;} a.scroll_flow_right_off,a.scroll_flow_left_off{border-color:#ccc} a.scroll_flow_right_off{background-position:-1px -50px;} a.scroll_flow_left_off{background-position:-56px -50px;} a.scroll_flow_left{background-position:-56px 0px;} .scroller{float:left;height:140px;margin-left:1px;overflow:hidden;padding-top:1px;width:600px;} .flow_shows{width:10000px;} .flow_item{float:left;height:160px;overflow:hidden;width:1000px;} .flow_items{height:100%;width:100%;} .back_border,.upload_art_border{border:1px solid #F8B787;height:105px;width:153px;background:#fff;text-align:center;padding:2px;} #work_flow_items,#collection_flow_items{margin:0 auto;text-align:center;} </style> </head> <body> <div id="work_flow_items" style='width:1000px;'> <a pageid="1" action="previous" href="#" class="scroll_flow_left_off" onclick="return false;"></a> <a pageid="2" action="next" href="#" class="scroll_flow_right" onclick="return false;"></a> <div id="flow_album_scroller" class="scroller" style="width: 800px; margin-left: 60px;"> <div class="flow_shows" id="flow_shows"> <div class="flow_item" id="flow_1" style="width: 800px;"> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a style="background: url("http://www.guaiyix.com/alpha/image/png/album.png") repeat scroll 0% 0% transparent;" class="work_item_c" cid="80" id="work_80" href="http://www.guaiyix.com/alpha/User/nombx10/AlbumItem/80/"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"><a title="点击设置这个艺术册子" href="#" onclick="return false" kid="0" id="c_80" class="config f_l" action="mod_config" btn_action="config"></a></span><div class="c_b"> </div> </div> <div id="_it80">yyy</div> </div> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a style="background: url("http://www.guaiyix.com/alpha/image/png/album.png") repeat scroll 0% 0% transparent;" class="work_item_c" cid="80" id="work_80" href="http://www.guaiyix.com/alpha/User/nombx10/AlbumItem/80/"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"><a title="点击设置这个艺术册子" href="#" onclick="return false" kid="0" id="c_80" class="config f_l" action="mod_config" btn_action="config"></a> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a style="background: url("http://www.guaiyix.com/alpha/image/png/album.png") repeat scroll 0% 0% transparent;" class="work_item_c" cid="80" id="work_80" href="http://www.guaiyix.com/alpha/User/nombx10/AlbumItem/80/"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"><a title="点击设置这个艺术册子" href="#" onclick="return false" kid="0" id="c_80" class="config f_l" action="mod_config" btn_action="config"></a> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> </div> <div class="flow_item" id="flow_1" style="width: 800px;"> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a style="background: url("http://www.guaiyix.com/alpha/image/png/album.png") repeat scroll 0% 0% transparent;" class="work_item_c" cid="80" id="work_80" href="http://www.guaiyix.com/alpha/User/nombx10/AlbumItem/80/"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"><a title="点击设置这个艺术册子" href="#" onclick="return false" kid="0" id="c_80" class="config f_l" action="mod_config" btn_action="config"></a> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a style="background: url("http://www.guaiyix.com/alpha/image/png/album.png") repeat scroll 0% 0% transparent;" class="work_item_c" cid="80" id="work_80" href="http://www.guaiyix.com/alpha/User/nombx10/AlbumItem/80/"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"><a title="点击设置这个艺术册子" href="#" onclick="return false" kid="0" id="c_80" class="config f_l" action="mod_config" btn_action="config"></a> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a style="background: url("http://www.guaiyix.com/alpha/image/png/album.png") repeat scroll 0% 0% transparent;" class="work_item_c" cid="80" id="work_80" href="http://www.guaiyix.com/alpha/User/nombx10/AlbumItem/80/"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"><a title="点击设置这个艺术册子" href="#" onclick="return false" kid="0" id="c_80" class="config f_l" action="mod_config" btn_action="config"></a> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

FF 和Chrome IE8 都正确就是IE7和IE6 通过不了不随着滑动块动
哪位同学帮我看看

作者: nombx 发布时间: 2010-10-19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>sadf</title> <style> body{background:#666} div{padding:0;} ul{overflow:hidden} a{text-decoration:none;color:#333;outline-style:none;outline-width:medium;} .collection_item{width:160px;text-align:center;} .collection_item_c,.work_item_c{width:150px;background:#ECE1F2;opacity:1.0;display:block;cursor:pointer;height:102px; display:block;margin:5px;} .collection_item,.work_item{margin:0px;float:left;height:140px;margin:6px 2px 8px 5px;position:relative;z-index:9;} .collection_item input.common_text_stiny,.work_item input.common_text_stiny{margin-left:25px;float:left;margin-right:5px;} .del_album,.del_art,.del_upload,.del_download{background:transparent url(http://www.guaiyix.com/image/gif/close.gif) no-repeat 2px 5px;cursor:pointer;position:absolute;right:-8px;top:-5px;width:20px;height:20px;display:none;z-index:1000;} .del_art{right:-12px;top:-12px;} .collection_item_t,.work_item_t{margin-top:5px;} a.scroll_flow_left,a.scroll_flow_right,a.scroll_flow_left_off,a.scroll_flow_right_off{display:block;float:left;height:60px;width:42px;margin-top:40px;border-color:#D8730C;background:url(http://www.guaiyix.com/image/gif/l_r2.gif) no-repeat scroll -1px 0px;} a.scroll_flow_right,a.scroll_flow_right_off{float:right;margin-right:3px;} a.scroll_flow_right_off,a.scroll_flow_left_off{border-color:#ccc} a.scroll_flow_right_off{background-position:-1px -50px;} a.scroll_flow_left_off{background-position:-56px -50px;} a.scroll_flow_left{background-position:-56px 0px;} .scroller{float:left;height:140px;margin-left:1px;overflow:hidden;padding-top:1px;width:600px;} .flow_shows{width:10000px;position:relative;z-index:10} .flow_item{float:left;height:160px;overflow:hidden;width:1000px;} .flow_items{height:100%;width:100%;} .back_border,.upload_art_border{border:1px solid #F8B787;height:105px;width:153px;background:#fff;text-align:center;padding:2px;} #work_flow_items,#collection_flow_items{margin:0 auto;text-align:center;} </style> </head> <body> <script language="JavaScript" type="text/javascript" src="http://www.guaiyix.com/js/min/prototype.js"></script> <script> Effect.SmoothScroll=Class.create(); Object.extend(Object.extend(Effect.SmoothScroll.prototype,Effect.Base.prototype),{ initialize:function(B){this.element=$(B); var A = Object.extend({x:0,y:0,mode:"absolute"},arguments[1]||{}); this.start(A) }, setup:function(){ if(this.options.continuous&&!this.element._ext){ this.element.cleanWhitespace(); this.element._ext=true; this.element.appendChild(this.element.firstChild) } this.originalLeft=this.element.scrollLeft; this.originalTop=this.element.scrollTop; if(this.options.mode=="absolute") { this.options.x-=this.originalLeft; this.options.y-=this.originalTop }},update:function(A){ this.element.scrollLeft=this.options.x*A+this.originalLeft; this.element.scrollTop=this.options.y*A+this.originalTop } }); var scrolling = false; function moveTo(element, container) { Position.prepare(); var containerOffset = Position.cumulativeOffset(container), elementOffset = Position.cumulativeOffset($(element)); scrolling = new Effect.SmoothScroll(container, {duration:0.7, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])}); }; </script> <div id="work_flow_items" style='width:1000px;'> <a pageid="1" action="previous" href="#" class="scroll_flow_left" onclick="moveTo('flow_1', $('flow_shows').parentNode);"></a> <a pageid="2" action="next" href="#" class="scroll_flow_right" onclick="moveTo('flow_2', $('flow_shows').parentNode);"></a> <div id="flow_album_scroller" class="scroller" style="width: 800px; margin-left: 60px;"> <div class="flow_shows" id="flow_shows"> <div class="flow_item" id="flow_1" style="width: 800px;"> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a class="work_item_c" cid="80" id="work_80" href="#"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"></span><div class="c_b"> </div> </div> <div id="_it80">yyy</div> </div> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a class="work_item_c" cid="80" id="work_80" href="#"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a class="work_item_c" cid="80" id="work_80" href="#"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> </div> <div class="flow_item" id="flow_2" style="width: 800px;"> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a class="work_item_c" cid="80" id="work_80" href="#"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a class="work_item_c" cid="80" id="work_80" href="#"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> <div class="work_item"> <div class="del_album" id="del_80" btn_action="delete"></div> <a class="work_item_c" cid="80" id="work_80" href="#"></a> <div class="collection_item_t none" id="_i80"> <span class="f_l m_l"> </span><div class="c_b"></div> </div> <div id="_it80">yyy</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

将JS代码提交上

作者: nombx 发布时间: 2010-10-19

IE7 和IE6 这个定位的问题大家能解决一下吗？

热门阅读

热门下载