设定网页最小最大宽度和高度（兼容IE6）

最新推荐文章于 2021-06-23 01:34:17 发布
最新推荐文章于 2021-06-23 01:34:17 发布
阅读量726 收藏
点赞数
分类专栏： css布局 文章标签： css ie 6 布局

/* 最小寬度 */

.min_width{min-width:300px;

 /* sets max-width for IE */

 _width:expression(document.body.clientWidth < 300 ? "300px" :"auto");

}

/* 最大寬度 */

.max_width{

 max-width:600px;

 /* sets max-width for IE */

 _width:expression(document.body.clientWidth > 600 ? "600px" :"auto");

}

/* 最小高度 */

.min_height{

 min-height:200px;

 /* sets min-height for IE */

 _height:expression(this.scrollHeight < 200 ? "200px" :"auto");

}

/* 最大高度 */

.max_height{

 max-height:400px;

 /* sets max-height for IE */

 _height:expression(this.scrollHeight > 400 ? "400px" :"auto");

} 

/* 最大最小寬度 */

.min_and_max_width{

 min-width:300px;

 max-width:600px;

 /* sets min-width & max-width for IE */

 _width: expression(

   document.body.clientWidth < 300 ? "300px" :

      ( document.body.clientWidth > 600 ? "600px" : "auto")

 );

} 

/* 最大最小高度 */

.min_and_max_height{

 min-height:200px;

 max-height:400px;

 /* sets min-height & max-height for IE */

 _height: expression(

   this.scrollHeight < 200 ? "200px" :

     ( this.scrollHeight > 400 ? "400px" : "auto")

 );

}

 另插一条限定图片最大宽度和高度的代码，仅供参考，其实与上述同源同理。

Html代码  

这里是结合css和其支持的expression实现的，示例代码如下：  
<title>控制图片的最大高宽</title>  
  <style type="text/css">  
       .clear{clear:both;}  

.widthimg{width: expression(this.width > 200 ? '200px': true); max-width: 200px; }  
</style>    
<body>  
<div class="clear">  
<img class="widthimg" src="../image/mm.jpg" />  
</div>  
<div class="clear">  
<img src="../image/xx7.jpg" />  
</div>  
</body>  
 </html>  


 <head>  
<style type="text/css">     
<!--  
img.pic{     
max-width:300;  
max-height:100px;   
/*由于IE6.0以及以前版本的IE不支持上边两个属性,所以加上以下两条语句.这里要说明的是expression只有IE支持*/    
width: expression(this.width > 300 && this.width / 300 >= this.height / 100 ? 300 : true);    
height: expression(this.height > 100 && this.width / 300 < this.height / 100 ? 100 : true);   
}   
//-->    
</style>  
 </head>   
<body>   
<div id="pic">    
</div>   
<img class="pic" src="Blue hills.jpg" />   
</body>   
</html>  
由于上边的代码中,设置最大的长宽是直接用数字的,这样再修改的时候十分不方便,所以做了以下修改:    
<html>   
<head>  
<script type="text/javascript">  
<!--  
Object.MAX_WIDTH = 400;  
Object.MAX_HEIGHT = 300;  
-->    
</script>   
<style type="text/css">    
<!--   
img.pic{    
max-width:300px;  
max-height:100px;  
width: expression(this.width > Object.MAX_WIDTH && this.width / Object.MAX_WIDTH >= this.height / Object.MAX_HEIGHT ? Object.MAX_WIDTH : true);   
height: expression(this.height > Object.MAX_HEIGHT && this.width / Object.MAX_WIDTH < this.height / Object.MAX_HEIGHT ? Object.MAX_HEIGHT : true);  
}    
//-->   
</style>  
</head>  
<body>   
<div id="pic">    
</div>   
<img class="pic" src="Blue hills.jpg" />   
</body>  
</html>  
这样的话,只需要修改Object.MAX_WIDTH和Object.MAX_HEIGHT这两个类变量就可以很方便的修改最大的长宽.

天涯游者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ie最小高度
m0_60703077的博客
03-08 101
ie最小高度 chrome 下最小字体为 16px，而 ie 下最小高度为 12px 如果设置一个盒子的话，设置盒子的高度，ie 下最小高度为 19px；我们想要设置更小的高度的话，需要给盒子的父盒子设置 font-size: 0; 即时可以设置宽度， ie 下也设置不了 0px。 ...
min-height最小高度的实现（兼容IE6、IE7、FF）（解决IE6不兼容min-height）
weixin_30363981的博客
11-18 118
布局过的人都知道CSS的最小高度min-height是个很有用的属性，它可以让很短的内容也有一个很合适的高度，使页面显得美观。但很可惜IE6不支持这一属性。怎么办呢？我们可以用另外一种方法让IE6也有最小高度min-height属性的效果。 众所周知，如果内容超过元素的高度，那么IE6是会自动增加元素的高度，即使你明确的定义了元素的高度。我们可以利用IE6的这个bug来让I...
IE中的最大最小宽度和高度
barrydiu的专栏
11-19 2640
max-width, min-width, max-height, min-height目前只有IE7,Firefox和opera支持,IE6,5不支持.max-width in IE* html div#division { width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* s
兼容IE6的网页最小最大宽度和最小最大高度css写法
12-13
本文将详细解释如何使用CSS为网页设置兼容IE6的最小宽度、最大宽度、最小高度和最大高度。 首先，让我们了解CSS中的`min-width`和`max-width`属性。这两个属性用于设定元素的宽度限制，确保元素不会小于或大于指定...
CSS的最大高度、最小高度及宽度在IE6下没有效果问题
12-10
为了提高代码的兼容性和性能，现代的解决方案通常会使用CSS Hack或者条件注释（Conditional Comments）来针对IE6单独提供样式。例如，可以使用`*html`前缀来仅对IE6应用特定的样式，或者使用JavaScript库如jQuery来...
IE6 div最小高度去除方法以及IE6div垂直居中css样式
09-25
在某些情况下，当你试图设定一个`div`的最小高度（通过CSS的`min-height`属性），IE6并不会按照预期工作，而是固定在一个特定的高度。这是因为IE6不支持标准模式下的`min-height`属性，而是使用了一个名为`hasLayout...
让IE6支持min-width最小宽度
10-30
外层的`.ie6-out`通过`_margin-left`设定一个较大的负值，而内层的`.ie6-in`通过`_margin-left`设定同样大的正值来抵消这个负值，这样当内容宽度小于设定的最小宽度时，`.ie6-in`会保持在`.ie6-out`的右侧，从而达到...
最佳网页宽度及其兼容实现方法
09-22
接下来，网页宽度将在780px至1260px之间自动变化，确保最小宽度不低于780px，最大不超过1280px，这样可以确保在大部分常见分辨率下，内容依然清晰可读。对于更大的分辨率，网页内容自动居中，提高整体的视觉效果。 ...
ie 设置高度html,拥有最小高度能自适应高度同时全兼容IE、FF的div设置
weixin_42401159的博客
06-23 98
复制代码代码如下:http://justinyoung.cnblogs.com//*div {width:200px;height:auto!important;height:200px;min-height:200px;border:1px solid green;}/*]]>*/Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/B/S! Yes!/...
各种页面高度
fan的学习笔记
08-27 780
Javascript获取获取屏幕、浏览器窗口 ，浏览器，网页高度、宽度的大小 网页可见区域宽：document.body.clientWidth  网页可见区域高：document.body.clientHeight  网页可见区域宽：document.body.offsetWidth (包括边线的宽)  网页可见区域高：document.body.offsetHeight (包括边线的宽
实现最小宽度的几种方法及CSS Expression[转]
u011927449的博客
01-21 394
实现最小宽度的几种方法及CSS Expression[转] 实现最小宽度的几种方法：css表达式尽量不用 支持FF IE7IE6 .test { ...
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
热门推荐
叶兴胜
10-10 2万+
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法 原文   http://blog.qiji.tech/archives/10167 主题 CSS 前言 现在 HTML5/CSS3 很流行罢，也是未来时代的趋势。在 HTML5 带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢。 动画 ani
php div宽度,CSS控制div宽度最大宽度/高度和最小宽度/高度
weixin_39602891的博客
03-17 113
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度，但是在IE6中很多朋友都会遇到不兼容的头疼问题，包括我也经常遇到这样的问题，在百度查了很多都没法解决，后来在一个论坛上学习到，在这里跟大家分享下css3样式代码，经过时间完全兼容各大主流浏览器。* 最小寬度 */.min_width{min-width:300px;/* sets max-width for IE */_width:...
控制页面最大最小宽度
快雪时晴天的专栏
08-23 9029
需求：设计页面时一般都是“最大化”显示，但是当手动缩小页面时，页面中的节点就会因为窗体容器的缩小而下沉。为了控制这一问题，下面使用 css 来对宽度进行控制。 代码中 min-width:200px   用来控制最小宽度 width:expression_r(document.body.clientWidth max-width：800px   用来控制窗体的最大宽度
文本超出显示省略号
花铛
03-15 3847
【代码】文本超出显示省略号。
CSS控制div宽度最大宽度/高度和最小宽度/高度
jsbuzhidao的专栏
07-29 1507
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度，但是在IE6中很多朋友都会遇到不兼容的头疼问题，包括我也经常遇到这样的问题，在百度查了很多都没法解决，后来在一个论坛上学习到，在这里跟大家分享下，经过时间完全兼容各大主流浏览器。 * 最小寬度 */ .min_width{min-width:300px;    /* sets max-width for IE */
html 设置最小宽度,总结css中最小宽度min-width和最大宽度max-width属性的使用方法...
weixin_35426202的博客
05-31 3941
CSS宽度属性为单词width，宽度width包含了两个重要的属性：最大宽度属性max-width和最小宽度属性min-width。最大宽度属性(max-width)用来定义宽度显示的最大值，当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。在最大宽度属性值中，可以使用三种属性值，分别为auto值、长度值和百分比值；最小宽度属性(min-width)用来定义宽度显示的最...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值