ie6实现min-width/max-width

简介:
1.实现最小宽度min-width
标准浏览器和ie7+用:min-width:1008px;
这样在实现自适应布局时可以保证布局不小于一定宽度,同时宽屏或窄屏窗口被用户拖窄后不会出现布局自动换行。
对于Ie6以下模拟实现用的css表达式:
_width:expression((documentElement.clientWidth < 1008) ? "1008px" : "auto" );
 
2.最大宽度max-width
标准浏览器和ie7+用:max-width:600px;
实际中可以对布局元素如divOut{width:100%;max-width:1008px;margin:0 auto;}这样在宽屏里让他不大于1008px宽,但这里我们允许窗口尺寸变小时可以自适应。
还有比如文章页中,对图片显示img{max-width:600px;}我们保证图片不要大于我们的文章内容容器宽度100px宽,以免图片显示不完整。
 
对于Ie6以下模拟实现用的css表达式:
_width:expression((documentElement.clientWidth >600) ? "600px" : "auto" );
 
<!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 > 
< meta  content ="text/html; charset=gbk"  http-equiv ="Content-Type"  /> 
< title >min-width/max-width </title> 
< style  type ="text/css" > 
div 

  margin:20px auto; 
  background-color:#f0f6f9; 
  border:1px solid #606669;    

#div1 

  min-width:300px; 
  _width:expression((documentElement.clientWidth < 300) ? "300px" : "auto" );     

#div2 

  max-width:400px;    
  _width:expression((documentElement.clientWidth > 600) ? "600px" : "auto" ); 

</style> 
</head> 

< body > 
   < div  id ="div1" > 
    这里是测试如何实现最小宽度的div元素,你可以拖动窗口尺寸试试.对于ie6来说,如我我们设定一个宽度,超出这个宽度时会撑开容器的,所以起到一个min-width的作用。 
   </div> 
    
   < div  id ="div2" > 
    这里是测试如何实现最大宽度的div元素. 
   </div>    
</body> 

</html>

 

------------补例子------------ 
 
 
  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <title>ie6 实现 min-width</title> 
  5.         <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> 
  6.         <style type="text/css"> 
  7.         * 
  8.         { 
  9.             margin:0; 
  10.             padding:0; 
  11.         } 
  12.         body 
  13.         { 
  14.             padding:10px; 
  15.             font-size:14px; 
  16.             min-width:500px; 
  17.             _width:expression((documentElement.clientWidth < 500) ? "500px" : "auto" );  
  18.         } 
  19.         .section 
  20.         { 
  21.             margin:10px 0; 
  22.             padding:5px; 
  23.             line-height:150%; 
  24.             color:#369; 
  25.             border:1px solid #ccc; 
  26.             background-color:#F0F0F0;            
  27.         } 
  28.         </style> 
  29.     </head> 
  30.     <body> 
  31.         <div id="sec1" class="section"> 
  32.             <p>用户体验(User Experience,简称UE)是一种纯主观在用户使用产品过程中建立起来的感受。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计实验来认识到。新竞争力在网络营销基础与实践中曾提到计算机技术和互联网的发展,使技术创新形态正在发生转变,以用户为中心、以人为本越来越得到重视,用户体验也因此被称做创新2.0模式的精髓。在中国面向知识社会的创新2.0——应用创新园区模式探索中,更将用户体验作为“三验”创新机制之首。 
  33.             </p> 
  34.         </div>   
  35.     </body> 
  36. </html> 



图片:

 

 

当拖拽窗口尺寸小于500像素时,会出现滚动条,否则自适应宽度。这个属性经常用在布局上,比如我们想给我的页面一个最小宽度970px,当宽屏幕时让其自适应。

 

至于css hack,不推荐使用,大家可以考虑把针对ie之类的hacks的样式,拿出去放在一个比如ie-patch.css之类

的文件里面,才有ie专有的条件注释之类的引入就行了。


----------------至于ie的width有个类似min-width的问题---------------

关于[匿名]janus说的width的特性是不是,类似下面的情况:

 
  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <title>ie6 实现 min-width</title> 
  5.         <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> 
  6.         <style type="text/css"> 
  7.         * 
  8.         { 
  9.             margin:0; 
  10.             padding:0; 
  11.         } 
  12.         body 
  13.         { 
  14.             padding:10px; 
  15.             font-size:14px; 
  16.             min-width:500px; 
  17.             _width:500px;  
  18.         } 
  19.         .section 
  20.         { 
  21.             margin:10px 0; 
  22.             padding:5px; 
  23.             line-height:150%; 
  24.             color:#369; 
  25.             border:1px solid #ccc; 
  26.             background-color:#F0F0F0;            
  27.         } 
  28.  
  29.         #sec1 
  30.         { 
  31.             width:500px; 
  32.         } 
  33.         #sec1 p 
  34.         { 
  35.             width:900px; 
  36.         } 
  37.         </style> 
  38.     </head> 
  39.     <body> 
  40.         <div id="sec1" class="section"> 
  41.             <p>用户体验(User Experience,简称UE)是一种纯主观在用户使用产品过程中建立起来的感受。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计实验来认识到。新竞争力在网络营销基础与实践中曾提到计算机技术和互联网的发展,使技术创新形态正在发生转变,以用户为中心、以人为本越来越得到重视,用户体验也因此被称做创新2.0模式的精髓。在中国面向知识社会的创新2.0——应用创新园区模式探索中,更将用户体验作为“三验”创新机制之首。 
  42.             </p> 
  43.         </div>   
  44.     </body> 
  45. </html> 

标准浏览器overflow时:

ie6:

当内容尺寸撑开容器时,有点最小宽度500px的感觉,对于溢出,我们这样控制:

这样控制容器溢出的部分隐藏,当然还有其他滚动条之类的。

 

 
  1. #sec1 
  2.     width:500px; 
  3.     overflow: hidden; 

利用这点到可以实现比如min-height:

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <title>ie6 实现 min-width</title> 
  5.         <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> 
  6.         <style type="text/css"> 
  7.         * 
  8.         { 
  9.             margin:0; 
  10.             padding:0; 
  11.         } 
  12.         body 
  13.         { 
  14.             padding:10px; 
  15.             font-size:14px; 
  16.         } 
  17.         .section 
  18.         { 
  19.             margin:10px 0; 
  20.             padding:5px; 
  21.             line-height:150%; 
  22.             color:#369; 
  23.             border:1px solid #ccc; 
  24.             background-color:#F0F0F0;            
  25.         } 
  26.  
  27.         #sec1 
  28.         { 
  29.             min-height:200px; 
  30.             _height:200px; 
  31.         } 

  32.         </style> 
  33.     </head> 
  34.     <body> 
  35.         <div id="sec1" class="section"> 
  36.             <p>用户体验(User Experience,简称UE)是一种纯主观在用户使用产品过程中建立起来的感受。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计实验来认识到。新竞争力在网络营销基础与实践中曾提到计算机技术和互联网的发展,使技术创新形态正在发生转变,以用户为中心、以人为本越来越得到重视,用户体验也因此被称做创新2.0模式的精髓。在中国面向知识社会的创新2.0——应用创新园区模式探索中,更将用户体验作为“三验”创新机制之首。 
  37.             </p> 
  38.         </div>   
  39.     </body> 
  40. </html> 

不然拖拽窗口感受下。

 








本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/155881 ,如需转载请自行联系原作者
相关文章
|
3天前
|
前端开发
line-height与height的区别
line-height与height的区别
20 0
|
算法
LeetCode 363. Max Sum of Rect No Larger Than K
给定一个非空二维矩阵 matrix 和一个整数 k,找到这个矩阵内部不大于 k 的最大矩形和。
77 0
LeetCode 363. Max Sum of Rect No Larger Than K
|
算法 C++
10min快速回顾C++语法(一)
本系列文章旨在短时间内回顾C/C++语法中的重点与易错点,巩固算法竞赛与写题过程中常用的语法知识,精准地解决学过但有遗忘的情况,为算法刷题打下坚实的基础。
94 0
|
前端开发
响应式 - 基于min-width和max-width属性的响应式布局
响应式 - 基于min-width和max-width属性的响应式布局
202 0
响应式 - 基于min-width和max-width属性的响应式布局
|
JavaScript 前端开发