min-width For ie6 与传统事件阻止-优快云博客

本文介绍了一种解决IE6浏览器下min-width属性缺失的方法，通过动态调整body宽度确保页面内容在不同窗口尺寸下的正常显示，并提供了一种阻止传统事件绑定中事件传播及默认行为的解决方案。

引言

ie6 不支持 min-width 是很早的事情了，大都建议直接设置 width 吧，反正 ie6 会自动撑破容器，但是如果 min-width 的区域要根据浏览器自适应呢，或者其子区域要根据它来决定相对大小呢，单纯设置 width 不能解决问题。

场景

窗口内所有区域都是百分比宽度，根据窗口宽度自适应大小，但是窗口又不能太小，否则其内容会紧凑的看不清楚，那么对于支持min-width的就很简单了：

<style>
				body {
					//除了ie6 外的高级浏览器都认得
					min-width:1024px;	
				}
			</style>

但是对 ie6 就没什么好办法了，且body内区域都是百分比布局，一开始设定死width，那么整体就固定了。

解决方案：

还是只能用 width，但是我们可以动态的根据窗体大小来限制 body 的 width。

if(Ext.isIE6) {
                (function(){
                    (function ieMinWidth(){
                    		//当前窗口可见区域大小
                        var viewSize=Ext.getDoc().getViewSize();                    
                        Ext.getBody().setStyle({
                        		//最小1024
                            width:Math.max(viewSize.width,1024)+"px"
                        });                   
                    })();
                    //ie6 只有监控窗口大小改变
                    Ext.EventManager.onWindowResize(ieMinWidth);
                })();
            }

传统事件绑定的事件阻止

很多遗留代码用的是：

<a href="javascript:do();"></a>

现在要阻止 a 的事件（传播 + 默认行为），而原来的事件处理方法就不行了，而又想改动最小，根据ie下面事件统一在window.event ,而firefox在调用事件处理程序时会把事件作为第一个参数（即使 inline 绑定），那么可以改动最小的完成需求：

<a href="notfound.jsp" onclick="

				//标准浏览器会把事件作为第一个参数调用 onclick
				//ie 直接 取 window.event好了
				var e=arguments[0] || window.event;
				e=Ext.EventObject.setEvent(e);
				
				//something to do
				
				//即使在传统方式也可以阻止了,不能传播事件和默认行为
				e.stopEvent();
			
			"> traditional event way ,i am stoped when click </a>

全部测试代码：

<!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" lang="en" xml:lang="en">
    <head>
			<script src="ext-core-min.js"></script>
			<style>
				body {
					//除了ie6 外的高级浏览器都认得
					min-width:1024px;	
				}
			</style>
		</head>	
		<body>
			<h1>即使是 ie6 窗口宽度小于 1028 会出现滚动条的，哈哈哈</h1>
			
			
			<div style="border:1px solid red;width:50%">	即使是 ie6 我的宽度也始终是窗口宽度一半，除非窗口宽度小于 1028		</div>
			<a href="notfound.jsp" onclick="

				//标准浏览器会把事件作为第一个参数调用 onclick
				//ie 直接 取 window.event好了
				var e=arguments[0] || window.event;
				e=Ext.EventObject.setEvent(e);
				
				//something to do
				
				//即使在传统方式也可以阻止了,不能传播事件和默认行为
				e.stopEvent();
			
			"> traditional event way ,i am stoped when click </a>
			
			
			<script>
				Ext.onReady(function(){
					if(Ext.isIE6) {
                (function(){
                    (function ieMinWidth(){
                    		//当前窗口可见区域大小
                        var viewSize=Ext.getDoc().getViewSize();                    
                        Ext.getBody().setStyle({
                        		//最小1024
                            width:Math.max(viewSize.width,1024)+"px"
                        });                   
                    })();
                    //ie6 只有监控窗口大小改变
                    Ext.EventManager.onWindowResize(ieMinWidth);
                })();
            }
            
				});
			</script>
			
		</body>

</html>