浏览器兼容性问题

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;width: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中这些属性有的已经丢弃

 

posted @ 2013-04-03 09:23  Merray  Views(278)  Comments(0Edit  收藏  举报