开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Unity Shader Graph 制作 Fade 淡入淡出效果
Unity Shader Graph 制作 Fade 淡入淡出效果
65 0
响应式 - 基于min-width和max-width属性的响应式布局
响应式 - 基于min-width和max-width属性的响应式布局
56 0
一文看懂Tomcat、Nginx和Apache的区别
一文看懂Tomcat、Nginx和Apache的区别
64 0
Apache Spark Delta Lake 删除使用及实现原理代码解析
Apache Spark Delta Lake 删除使用及实现原理代码解析 Delta Lake 的 Delete 功能是由 0.3.0 版本引入的。在介绍 Apache Spark Delta Lake 实现逻辑之前,我们先来看看如何使用 delete 这个功能。
1662 0
Unity3d:Exception: JNI: Init'd AndroidJavaClass with null ptr!
Unity3d 错误:Exception: JNI: Init'd AndroidJavaClass with null ptr! 解决:需要运行在安卓真机上。
1839 0
实现vmware workstation内linux访问宿主机win7上的文件夹
方法一: 用mount命令,在windows中建立文件夹并设为共享文件夹,然后再linux中用命令               mount -t smbfs -o username=administrator,password=12345 //192.168.1.100/share /mnt/mydir               即可 方法二: 用wmvare tools, 1、安装时设成net共享。
1380 0
IBM WebSphere Application Server V7.0 Fix Pack 9于2010.03.25发布
IBM WebSphere Application Server V6.1 Fix Pack 29于2010.01.18发布 各个平台下载,请见: ftp://ftp.software.ibm.com/software/websphere/appserv/support/fixpacks/was70/cumulative/cf7009/ UpdateInstaller下载,请见:ftp://
1057 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载