关键字:CSS style expression position fixed dtd w3c ie interet explorer
以下结果仅以IE7.0进行测试，不保证其它的浏览器或版本也有相同的结果．
先说一下dtd,现在一般都用xhtml1-transitional.dtd这个dtd,也就是在html文件的开始处加上<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,现实测一下有什么不同．
测试代码中有部分是以前用来在固定位置显示对象的样式和脚本,加入xhtml1-transitional.dtd后,发现它已经失效了.经检查发现其实是
document.body.scrollTop失效了,值总是为0.看来,是w3c认为既然可以用fixed定位了,再要document.body.scrollTop没用了,应该还有其它较
多的属性也失效了.
下面测试的内容都是加入了xhtml1-transitional.dtd后的结果:
以前一直以为position:fixed只与浏览器及版本有关,其实不然,position:fixed还与网页使用的dtd有关.实测中发现,只有使用了xhtml1-
transitional.dtd以及一定的浏览器版本position:fixed才有效果.position:fixed一般要配合top,left,bottom,right使用,不过一般指定两个
就行了(多了也没用,因为显示器屏幕是2维的,只用两个就能定位了,多了反而不知道到底会在哪里),比如"position:fixed;bottom:0;right:0;"
表示固定定位在屏幕右下方.
咦,还真有点奇怪,测试一下:(这个测试也不纯粹是为了写东西,也有它的用处:当你发现你的设定没有想象中的效果的时候,可以根据所得的
经验进行排错检查)
正常用法不说了,都是top配合right或left其中一个,或bottom配合right或left其中一个.
写多几个会怎么样呢?
先看看三个:
"top:0;right:0;left:0;",猜猜IE怎么放?又有right又有left,忽略后面一个?哈,不,IE把它放在中间了.
"top:0;right:0;left:100;"呢?IE会把它放在平均位置50?啊,不,IE把它放在了右边,反而把非0的那个忽略了."top:0;left:100;right:0;"
效果一样,忽略非0的那个.
"left:100;right:100;"和"right:100;left:100;"则放在左边100处,left优先.
"right:200;left:100;"和"left:100;right:200;"一样,放在左边100处,left优先.
应该是这样:有冲突的两个参数,首先忽略非0的那个.如果两个都不是0,则left优先.top和bottom应该是top优先.
所以"bottom:0;left:100;left:0;"将会出现在左下角.
还有,position:fixed下,元素的定位不受body的margin影响.
从测试中发现页面中的object只要它向它的容器(这里当然是指浏览器)抛出事件时,就会引起expression进行重新计算.所以如果使测试代
码中的flash那段代码生效,则计数器会不断变化,观察了一下,它的频率好象和flash的帧速差不多,因此估计是flash的播放头移动或其它事件引
引起的.于是找来了一个播放头不动的flash(音乐播放器)换上,果然,那个计数器不再动了.(这个想了好久才明白,因为最初用来测试的flash是
铁芒的天气预报flash,看画面不象播放头会动的flash,也许是其它事件吧).
下面是测试的代码:
<!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>
<style>
#fixedPostion {
position: fixed;bottom:0;left:0;text-align:center;z-index:999999;
}
/* 这是以前在固定位置显示的样式 */
.myflashRight{position: absolute; TOP: expression(lockTop());left:expression(lockRight()); }
</style>
<script language="javascript">
var myVar = 0;
function lockTop()
{
myVar++;
window.status = "myVar:" + myVar;
return document.body.scrollTop;
}
function lockRight()
{
return screen.availWidth-160;
}
</script>
</head>
<body style="margin-left:100px">
<table height=300><tr><td></td></table>
<div id="childrenT">我是个很普通的DIV</div>
<div id="fixedPostion">
我是固定在左下角的DIV<br>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="190" height="170">
<PARAM NAME="wmode" value="transparent">
<param name="movie" value="http://www.techmango.com/blog/weather_p.swf">
<param name="quality" value="high">
<embed src="weather_p.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" width="190" height="170" wmode=transparent ></embed>
</object>
</div>
<table height=2000 width=100% ><tr><td></td></tr><tr><td></td></tr></table>
<div class="myflashRight" id="myflashRight">我固定在右上角</div>
</body>
</html>
