【三月之春】CSS笔记之三

<div class="pageall">
	<div id="flashContent">
		<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="1000" height="898" id="aprilfools" >
			<param name="movie" value="img/20120326/aprilfools.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#ffffff" />
			<param name="play" value="false" />
			<param name="loop" value="true" />
			<param name="wmode" value="transparent" />
			<param name="scale" value="showall" />
			<param name="menu" value="true" />
			<param value="true" name="allowfullscreen" />
			<param name="devicefont" value="false" />
			<param name="salign" value="" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed height="898px" align="middle" width="1000px" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="aprilfools" flashvars="" src="img/20120326/aprilfools.swf" errormessage="<div style="position: relative;width: 300px;background-color:#FFEFB6;border: 1px solid #FFC337;margin: 65px auto;padding: 10px;"><p>使用该测试，需要将您的Adobe Flash Player 播放器升级到10或更新版本</p><div><a href="http://get.adobe.com/cn/flashplayer/" target="_blank;">下载最新版本</a></div></div>" menu="true" play="false" allowfullscreen="true" allowscriptaccess="sameDomain" quality="high" wmode="transparent" bgcolor="#fff" ver="10.0.0"></embed>
		</object>
	
	</div>
	<a class="log" href="#" title="登录新浪微博"></a>
</div>

1.flash插入html要明白object与embed的区别。object标签是用于windows平台的IE浏览器的，而embed是 用于windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE浏览器。windows平台的IE利用Activex控件来播放flash而其它的浏览器则 使用Netscape插件技术来播放flash。 代码如上。

2.CSS的层叠问题。在IE和Firefox下，是允许在flash层之上显示任何网页元素的，但是要保证css定义好div及其z-index属性。

上例的CSS应该定义为：

<style type="text/css" media="screen">
.pageall{
	position:relative;margin:0 auto;width:1000px;height:898px;
}
#flashContent {overflow:hidden;margin:0 auto; }
.log {
    background: url("img/20120326/weibolog32.png") no-repeat scroll 0 0 transparent;
    height: 32px;
    width: 173px;
    position:absolute;
    top:16%;
    left:75%;
    z-index:10;
}
</style>

说明：一定要把flash的wmode属性值设置为transparent，才能保证在IE和FF下都正常显示。因为firefox会忽略param wmode，所以embed中的wmode无论为transparent还是window都不会影响火狐下的层叠显示效果。但是如果object标签内的wmode属性value值为window，则IE下最上层的标签会被挡住，不能正常显示出来。需要改为transparent。

引述wmode- (window, opaque, transparent) ：设置flash影片的window mode属性，指定flash在浏览器中的透明，层叠及位置。 此处应该使用：

<param name="wmode" value="transparent" />

其他相关知识请参考相关文章：

《OBJECT和EMBED标签》http://www.cnblogs.com/top5/archive/2009/08/07/1540871.html

《OBJECT和EMBED标签 》百度文库http://wenku.baidu.com/view/9df0706427d3240c8447ef82.html

3.解决点击A链接时出现的虚线框

方法一：针对IE使用CSS中hidefocus属性设置。在IE下，需要在 a标签中设置 hidefocus="true" 属性。如下写法做个对比：

<a href="#" hidefocus="true" title="没有虚线框">没有虚线框</a>
<a href="#" title="有虚线框">有虚线框</a>

说明：hidefocus即隐藏焦点，是个布尔变量，用于设置超链接外虚线框是否显示，其功能等同于： οnfοcus="this.blur()" ，也可省略赋值直接写hidefocus（最好不这样写，养成书写规范的html格式的好习惯）。 如果a标签代码没有hidefocus属性或者hidefocus设置为false,鼠标点击该超链接则外面出现一虚线框，聚焦生效。而使用了hidefocus则不会有虚线框。
针对FF，直接给a标签定义样式 outline:none; 即可。

兼容的做法可以这样写：

a{outline:none;blr:expression(this.onFocus=this.blur());} //支持IE

相关扩展：

《如何去掉网页上flash虚线边框》http://apps.hi.baidu.com/share/detail/21317849

《js去掉flash虚线边框》http://www.baohe.com/album/view-20536-532823.html

4.解决IE6下不支持fixed方法：

div {
    position: fixed
    top: 50px;  /* 其他浏览器下定位，在这里可设置坐标*/
    _position: absolute; /*IE6 用absolute模拟fixed*/
    _top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/
}
body {
    _background-image: url(about:blank);     /*用浏览器空白页面作为背景*/
    _background-attachment: fixed;             /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
}

此外，还可使用javascript实现兼容。

详细可参考《 IE6 fixed的完美解决方案》http://apps.hi.baidu.com/share/detail/48291954

5.由于IE6不支持PNG24透明，所以尽量采用PNG8格式，当然遇到PNG8不能满足图片质量要求的时候，就得另想办法了，有许多js的解决方法，这里个人习惯使用js 插件（DD_belatedPNG）。

相关阅读请参考：《DD_belatedPNG 解决 IE6 不支持 PNG-24 的解决方案》 http://www.cnblogs.com/xueduanyang/articles/2241080.html

2012-03-26 备忘！欢迎大家补充探讨！