引言
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>
分享到：
相关推荐
通过这些兼容性技巧，我们可以在不支持`min-width`和`max-width`的IE6和IE7浏览器中实现类似的功能。然而，需要注意的是，`expression`表达式在性能上较差，可能导致页面加载缓慢或者在某些情况下引起浏览器崩溃。...
在table中设置min-width和max-width属性 <tr><td>1</td><td>2</td></tr> table{min-width:60%;min-width:100%;} 但是chrome不兼容max-width，ie7两者都不兼容。 解决方案：在table外层包一个div，在div上设置...
总之，处理 min-width 与 IE6 不兼容的问题需要结合多种技巧和方法，同时考虑到浏览器的特殊性与项目的技术要求。随着现代浏览器的发展以及网页标准的完善，我们有理由相信未来网页开发中此类问题将会得到缓解，...
标题中的“让IE6支持min-width最小宽度”指的是在Internet Explorer 6（简称IE6）浏览器中实现CSS的`min-width`属性。`min-width`属性允许开发者设置一个元素的最小宽度，确保它不会在屏幕或窗口尺寸缩小到一定程度...
需要注意的是，当设置min-width属性时，可能会与max-width属性结合使用。max-width属性允许开发者定义元素的最大宽度，这样元素宽度在不超过最大宽度的前提下，会尽量达到设定的最小宽度。这种组合使用可以更精确地...
minmax_props= new Array( new Array(‘min-width’, ‘minWidth’), new Array(‘max-width’, ‘maxWidth’), new Array(‘min-height’,’minHeight’), new Array(‘max-height’,’maxHeight’) ); // Binding...
IE6是一个非常老旧的浏览器版本，其对CSS的许多属性支持不全，比如本文提到的min-width和min-height属性。min-width属性可以设置元素的最小宽度，当浏览器窗口或者父元素的宽度小于设定值时，元素的宽度不会继续收缩...
然而，IE6对于min-width和min-height属性并不提供原生支持。在IE6中，若仅使用width或height属性，它会默认为元素提供一个最小尺寸的特性，但这种方式在其他现代浏览器中并不适用，比如在Firefox或IE7中，这样的设定...
IE7及以上版本的浏览器支持min-width属性，但IE6不支持。因此，在IE6中，如果需要使用类似min-width的功能，可以通过JavaScript或者特定的CSS表达式来模拟。不过，随着IE6逐渐退出历史舞台，这种兼容性问题也越来越...
04_盒子模型-内容-max-min-width
总结来说，为了让IE6支持 `min-width` 和 `max-width`，我们需要利用IE6的私有属性 `_width` 结合JavaScript表达式进行处理。虽然这些技术在现代浏览器中已不再适用，但在维护旧项目或考虑兼容性时，了解这些方法...
文章介绍了min-height和min-width兼容多浏览器版本做法，有需要的同学可看看。min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。先说说min-height。这个看起来很容易。看下面试例： 复制...
接下来，如果需要让IE6同时支持min-width和max-width属性，可以使用更复杂的JavaScript表达式。当元素的滚动宽度（scrollWidth）超出最大值时，可以将其设置为最大宽度，当滚动宽度小于最小值时，可以设置为最小宽度...
坑人的IE6，不支持min-height，但是实际操作中，这个属性是非常需要的。那IE6下面怎么实现呢？请看geniusalien提供的完美解决方案： （geniusalien温馨提示：本文的min-height操作方式试用于min-width、max-width、...
在早期的网页设计中，IE6（Internet Explorer 6）浏览器并不支持CSS的`min-width`属性，这给开发者带来了不少挑战，因为`min-width`属性对于创建响应式布局至关重要，它能确保元素的最小宽度，防止内容在窗口缩小时...