Rekey's WebSpace

Just So So ...

Home Develop Life Music News 关于

IE6,或者说兼容,始终只是加分题。

作者:Rekey 发布时间:November 29, 2010 分类:Develop

每当我们说起前端开发,似乎总是离不开兼容,离不开IE6。

以至于大多数招聘需求,大多数简历上都有重要的一点,能制作出兼容IE和Firefox的页面。

当然,有的同学会加上符合W3C规范的,合起来是能制作出兼容IE和Firefox的符合W3C规范的页面。

推荐梁璟彪[TwinsenLiang]的一篇博客WEB2.0的单手定则

他讲到的单手定则,有一下的5点:

所以从梁璟彪[TwinsenLiang]的观点应该是,作为一个相对全面的前端开发工程师,至少上面五项都要熟悉以上,可是,如果大家都把焦点集中在关于兼容问题上,我认为其实是一种本末倒置。

所以我认为:好的前端开发应该是在熟悉单手定则五项以后,能有兼容这个加分题来加分。

IE6毕竟只是一道加分题,要做,可不是最要做的。最要做的应该是好好学习基础。好好的看手册,看思路,好好的发挥想象力。好好的做事情。

P.s : 参考这段奇异的代码,其实无IE6,有关的只是一种思路的延续。

IE6模拟position:fixed效果

作者:Rekey 发布时间:August 28, 2009 分类:Develop

不会抖动,但是使用了expression,很糟糕。
纯保存。
源代码:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<meta name="keywords" content="关键字" />
		<meta name="description" content="页面简介" />
		<meta name="generator" content="程序" />
		<meta name="author" content="作者[ReKey]" />
		<meta name="copyright" content="版权所有[ReKey]" />
		<meta name="MSSmartTagsPreventParsing" content="True" />
		<meta http-equiv="MSThemeCompatible" content="Yes" />
		<title>Untitled Document</title>
		<style type="text/css">
			body{margin:0;padding:5px 0 30px}
			.test{border:1px solid #ccc;line-height:100px;margin:0 5px 5px;}
			.fixed{position:fixed;bottom:0;left:15px;right:15px;height:30px;line-height:30px;background:#ccc;}
			#iefixed{zoom:1;margin:-1px 15px 0;height:1px;overflow:hidden;}
		</style>
		<!--[if lt IE 7]>
        <script type="text/javascript">
            function _fixBackground(){
				var body = document.body;
				var BLANK_GIF;
                if (body.currentStyle.backgroundAttachment != "fixed") {
                    if (body.currentStyle.backgroundImage == "none") {
                        body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy
						body.runtimeStyle.backgroundAttachment = "fixed";
                    }
                }
            }
			window.onload = function(){
				_fixBackground();
				}
        </script>
        <style type="text/css">
        	.fixed{position: absolute;
    		bottom:0;
    		clear: both;
			width:expression(document.getElementById('iefixed').clientWidth);
			left:expression(document.getElementById('iefixed').offsetLeft);
    		top:expression(eval(document.compatMode &&
        document.compatMode=='CSS1Compat') ?
        documentElement.scrollTop
        +(documentElement.clientHeight-this.clientHeight)
        : document.body.scrollTop
        +(document.body.clientHeight-this.clientHeight));}
        </style>
	< ![endif]-->
	</head>
	<body>
		<!--[if lt IE 7]><div id="iefixed"></div>< ![endif]-->
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="fixed">这里是position:fixed部分.</div>
	</body>
</html>