1.Flash兼容性问题
普通的Flash显示方式 :HTML 嵌入
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="920" HEIGHT="200" id="banner" ALIGN=""> <PARAM NAME=movie VALUE="banner.swf"> <PARAM NAME=quality VALUE=high> <EMBED srcq="banner.swf" quality=high WIDTH="920" HEIGHT="200" NAME="banner" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT>
以上代码在实际浏览器测试中还是出现了问题
最终的解决方案 swfbject.js 一个javascript的Flash嵌入插件
该脚本目前兼容几乎所有的主流浏览器
下载地址:
http://www.cnblogs.com/shaocm/admin/EditPosts.aspx?opt=1
使用示例:
<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("banner.swf", "flashcontent", "920", "200", "9.0.0", "expressInstall.swf"); </script>
<div id="flashcontent"> </div>
2.CSS兼容性问题
图片无缝滚动效果 使用的js
<div id=demo style="overflow:hidden;750;" align=center> <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr><td valign=top bgcolor=ffffff id=marquePic1> <table width='100%' border='0' cellspacing='0'><tr>
<td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>01</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>02</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>03</a></td>
<td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>04</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>05</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>06</a></td>
<td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>07</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>08</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>09</a></td>
</tr></table> </td><td id=marquePic2 valign=top></td></tr> </table></div> <script type="text/javascript"> var speed=50 marquePic2.innerHTML=marquePic1.innerHTML function Marquee(){ if(demo.scrollLeft>=marquePic1.scrollWidth){ demo.scrollLeft=0 }else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>
实际使用过程中出现了图片重叠的问题 在图片总长度超过当前容器宽度时出现,在IE中正常 FF等其他浏览器均不正常
后来发现是自己在使用过程中Div多加了一层 及table cellpaddingcellspacingcellspace
的问题,总结几个属性尽量使用css控制 不要使用HTML表格属性直接控制 在HTML中这些属性有的已经丢弃