ie6实现min-width/max-width-阿里云开发者社区

ie6实现min-width/max-width

2017-11-07 1063

版权

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

简介：

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>

------------补例子------------

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

图片:

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

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

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

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

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


  
  

   
   <!DOCTYPE html> 

   
   <html> 

   
       <head> 

   
           <title>ie6 实现 min-width</title> 

   
           <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> 

   
           <style type="text/css"> 

   
           * 

   
           { 

   
               margin:0; 

   
               padding:0; 

   
           } 

   
           body 

   
           { 

   
               padding:10px; 

   
               font-size:14px; 

   
               min-width:500px; 

   
               _width:500px;  

   
           } 

   
           .section 

   
           { 

   
               margin:10px 0; 

   
               padding:5px; 

   
               line-height:150%; 

   
               color:#369; 

   
               border:1px solid #ccc; 

   
               background-color:#F0F0F0;            

   
           } 

   
    

   
           #sec1 

   
           { 

   
               width:500px; 

   
           } 

   
           #sec1 p 

   
           { 

   
               width:900px; 

   
           } 

   
           </style> 

   
       </head> 

   
       <body> 

   
           <div id="sec1" class="section"> 

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

   
               </p> 

   
           </div>   

   
       </body> 

   
   </html>

标准浏览器overflow时:

ie6:

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

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


  
  

   
   #sec1 

   
   { 

   
       width:500px; 

   
       overflow: hidden; 

   
   }

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


  
  

   
   <!DOCTYPE html> 

   
   <html> 

   
       <head> 

   
           <title>ie6 实现 min-width</title> 

   
           <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> 

   
           <style type="text/css"> 

   
           * 

   
           { 

   
               margin:0; 

   
               padding:0; 

   
           } 

   
           body 

   
           { 

   
               padding:10px; 

   
               font-size:14px; 

   
           } 

   
           .section 

   
           { 

   
               margin:10px 0; 

   
               padding:5px; 

   
               line-height:150%; 

   
               color:#369; 

   
               border:1px solid #ccc; 

   
               background-color:#F0F0F0;            

   
           } 

   
    

   
           #sec1 

   
           { 

   
               min-height:200px; 

   
               _height:200px; 

   
           } 

   
   



   
           </style> 

   
       </head> 

   
       <body> 

   
           <div id="sec1" class="section"> 

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

   
               </p> 

   
           </div>   

   
       </body> 

   
   </html>

不然拖拽窗口感受下。

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/155881 ，如需转载请自行联系原作者

ie6实现min-width/max-width

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

ie6实现min-width/max-width

热门文章

最新文章

相关电子书