`

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

IECSSJavaScriptHTML 
阅读更多 
/* 最小寬度 */
.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")
  );
}

 

 

 

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

 

这里是结合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这两个类变量就可以很方便的修改最大的长宽.

 

分享到：
| 应聘网页设计师常见的8个面试试题和答案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    兼容IE6的网页最小最大宽度和最小最大高度css写法

    为了确保网页在IE6中的正常显示，并且能够控制页面元素的最小宽度、最大宽度、最小高度和最大高度，我们需要采用特定的CSS写法。这些写法通常是利用IE6特有的expression()函数来实现。 首先，我们来讨论如何为网页...

    CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法

    在网页设计中，为了提高用户体验，常常需要设定页面内容的最大和最小宽度以及高度。这不仅能够保证内容在不同设备上的展示效果，还能防止因分辨率不同而导致的布局错乱。然而，在早期的网络浏览器如IE6中实现这样的...

    让CSS兼容IE和Firefox的技巧集合

    为兼容IE，可以为正常浏览器和IE分别设定宽度和高度，如： ```css #box{ width: 80px; height: 35px; } html&gt;body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px; } ``` 5. **...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    在IE6和IE7中，设置了`float`属性的DIV元素，其`margin`可能会被错误地解释为两倍大小。这是一种已知的bug，可以通过添加`display:inline;`来修正。例如： ```css #IamFloat { float: left; margin: 5px; ...

    有关在ie6中不定义宽度的浮动

    - **定义宽度**：为浮动元素设定一个明确的宽度，以避免IE6的最小宽度问题。 - **使用hasLayout**：IE6中的`hasLayout`概念会影响元素的渲染。某些情况下，通过触发元素的`hasLayout`（例如设置`zoom:1`或`display:...

    CSS的最大高度、最小高度及宽度在IE6下没有效果问题

    为了提高代码的兼容性和性能，现代的解决方案通常会使用CSS Hack或者条件注释（Conditional Comments）来针对IE6单独提供样式。例如，可以使用`*html`前缀来仅对IE6应用特定的样式，或者使用JavaScript库如jQuery来...

    让IE6支持min-width最小宽度

    外层的`.ie6-out`通过`_margin-left`设定一个较大的负值，而内层的`.ie6-in`通过`_margin-left`设定同样大的正值来抵消这个负值，这样当内容宽度小于设定的最小宽度时，`.ie6-in`会保持在`.ie6-out`的右侧，从而达到...

    拥有最小高度能自适应高度同时全兼容IE、FF的div设置

    在网页设计中，经常会遇到需要设定一个div元素同时拥有最小高度并且高度能够根据内容自适应，同时还要求在不同的浏览器下保持一致的显示效果。尤其是在IE（Internet Explorer）和FF（Firefox）浏览器之间，这两款...

    min-height和min-width两个最小高度和最小宽度兼容多浏览器版本

    在网页布局设计中，`min-height` 和 `min-width` 是两个非常重要的CSS属性，用于定义元素的最小高度和最小宽度。这两个属性允许我们在页面设计时确保元素至少占用一定的空间，即使内容较少，也能保持一定的视觉效果...

    CSS兼容IE和Firefox的技巧集合

    - **解决方案**：通过条件注释来区分IE和其他浏览器，使用JavaScript表达式来设定最小宽度。 - **示例代码**： ```css #box { width: 80px; height: 35px; } html &gt; body #box { width: auto; height: ...

    最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)

    本文将详细介绍一些常见的CSS兼容性问题及其解决办法，并重点针对IE6和IE7这两个特别“顽固”的浏览器。 #### 一、CSS基础知识回顾 为了更好地理解下面提到的兼容性问题，我们先简单回顾一下CSS的基础知识。 - **...

    IE和Firefox之间兼容性问题

    IE（Internet Explorer）浏览器和Firefox浏览器作为市场上较为流行的两种浏览器，在处理CSS样式时存在一些差异，导致开发者在进行网页布局时可能会遇到兼容性问题。本文将详细探讨IE浏览器和Firefox浏览器之间的兼容...

    在IE和火狐浏览器下页面兼容性问题的处理(最完整篇

    2. **margin加倍问题**：在Internet Explorer（特别是IE6）中，设置为浮动的div（`float`）会出现margin加倍的现象。解决方法是在该div内部添加`display: inline;`，这样IE会正确解析margin。 3. **浮动元素的双倍...

    兼容IE6、IE7的min-width、max-width写法

    在网页设计中，`min-width` 和 `max-width` 是两个非常重要的CSS属性，它们用于定义元素的最小和最大宽度，以确保元素在不同屏幕尺寸和设备上保持良好的布局和可读性。然而，这两个属性在早期的Internet Explorer...

    css入门教程IE和Firefox浏览器CSS兼容性技巧整理.docx

    例如，设置一个类并使用`expression`属性来检查浏览器宽度，当宽度小于设定值时，强制设置为最小宽度。 7. **浮动元素的文本间距问题**： 当左边的元素浮动时，右边的元素文本可能会与其有3像素的间距。在IE中，...

    IE6 div最小高度去除方法以及IE6div垂直居中css样式

    本篇文章将探讨两个在IE6中常见的问题及其解决方案：去除div最小高度限制和实现div垂直居中。 首先，让我们解决IE6中的div最小高度问题。在IE6中，当尝试设置一个较小的高度（如3px）时，div的实际高度可能不会按照...

Magicbox
Global site tag (gtag.js) - Google Analytics