`
hope598
  • 浏览: 67054 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

css hack---IE6下的min-height,min-width,max-height,max-width问题

    博客分类:
  • css
阅读更多

在做页面布局时遇到了ie6不支持min-height问题,下面将分别描述问题及其解决办法:

<div id="all">
    <div id="left"></div>
    <div id="right"></div>
</div>
 

说明一个div中包括了两个div:left和right,left高度为300px,right高度不定。问题:让left和right两个div的高度能够始终都保持一致。如果让right的高度自动,但是当right的高度小于left高度时,left里面内容会被自动截断...

起初的解决办法为:

#right{
    min-height:300px;
    height:auto !important;
    height:300px;
}
 

但是后来发现如果右侧div里面包含图片,高度就会超过300px,这样遇到一个问题:right的高度不会自动拉长,内容被截断...

后来加了一句话让IE不但有了最小高度,还可以自动拉伸:

#right{
    min-height:300px;
    height:auto !important;
    height:300px;
    overflow:visible;
}

 

也可以使用width:expression(document.getElementById("").width>300?"300px":"auto");来约束相应div的高度。但是该方法有个和js一样的执行过程:必须要等到两个div都加载完成了才有效果,而不会像min-width一样,未载入前就限制了宽度。不过一次加载expression是不会导致内存泄露的。

 

同理:min-width,max-height,max-width也可以使用上述两种方法解决该hack。

 

希望对大家能够有所帮助~~~

0
0
分享到:
评论
2 楼 hope598 2010-06-12  
楼上的能否说下什么情况吗?
1 楼 ian_jiang 2010-06-12  
骗子你

相关推荐

    解决IE6兼容问题的十一大技巧

    6. **最小高度(min-height)**:IE6不支持`min-height`属性,但可以通过CSS hack来解决,如: ```css #container { min-height: 200px; height: auto !important; /* 对其他浏览器生效 */ height: 200px; /* 对...

    IE 6不支持min-height或max-width等属性的完美解决方案

    其中,`min-height` 和 `max-width` 属性在IE6中不受支持,这使得创建响应式布局或者确保元素最小高度成为了一大挑战。然而,通过一些技巧和 hack,我们仍然可以为IE6提供类似的功能。 **1. 利用IE6不识别`!...

    DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf

    本文档“DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf”主要关注如何处理Firefox和不同版本的Internet Explorer(IE6、IE7、IE8、IE9)之间的CSS差异。以下是一些关键知识点的详细说明: 1. **CSS Hack**: - CSS Hack...

    CSS HACK收集:关于IE6/FF/google等浏览器hack的方法详细

    类似于max-width和min-height,IE6不支持min-width。可以使用JavaScript检查元素的clientWidth,并根据需要动态设置宽度。 CSS Hack是前端开发者应对浏览器兼容性问题的重要工具,理解并正确使用这些技巧可以确保...

    jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    $(this).css("width", maxWidth).css("height", maxHeight); } } }); }); 等比例缩放图片"/&gt; ``` 这段代码中,我们首先在CSS中设置了`.imgBox`的宽度为400px,并限制了图片的最大宽度(`max-...

    [网页重构xhtml.css].css.hack.pdf

    `min-width`属性允许设定元素的最小宽度,但IE6不支持。可以使用JavaScript或CSS表达式来模拟此功能: ```css min-width: 300px; /* 或针对IE6 */ *html .element { width: expression(this.offsetWidth ); } ```...

    IE6-IE11兼容性问题列表及解决办法

    IE6对于CSS的支持非常有限,例如不支持浮动元素的`clear:both`属性,不理解`min-height`和`max-height`,且对盒模型的理解与W3C标准不符,导致布局混乱。解决这些问题通常需要使用特定的hack技巧,如使用`_width`...

    css9种设计技巧

    4. 最大最小宽度:使用`max-width`和`min-width`属性可以确保元素在不同屏幕尺寸下保持良好的可读性和布局。例如: ```css .container { width: 800px; max-width: 90%; } img { max-width: 100%; height: ...

    DIV+CSS基础教程全攻略.pdf

    对于`IE6`不支持`min-height`的问题,可以通过CSS Hack解决,如`.yangshi{min-height:50px; _height:50px;}`,这里`_height`是专门为`IE6`设定的。 `overflow`属性则是处理内容溢出的,除了`hidden`之外,还可以...

    CSS高级应用技巧.pdf

    文档中提到了一些HTML和CSS属性的兼容性问题,如`width`, `height`, `zoom`, `min-width`, `min-height`, `max-width`, `max-height`, `overflow`, `position: fixed`等。针对旧版IE浏览器的特定行为,介绍了如何...

    DIV CSS基础教程全攻略

    然而,IE6浏览器不支持`min-height`,需要使用CSS Hack来兼容,如`_height:50px;`。 综合示例代码: ```html &lt;!DOCTYPE ...

    学习样式表CSS参考-常用的CSS知识

    IE浏览器在处理`min-width`和`min-height`属性时存在问题。它通常会将常规的`width`和`height`属性视为最小尺寸。这会导致布局问题,尤其是当需要设置背景图片时。为了解决这一问题,可以采用以下方法: ```css ....

    CSS+DIV教程

    2. **IE6 兼容性处理**:由于 IE6 不支持 `min-height`,可以通过 CSS hack 方法来解决兼容性问题。 **示例**: ```css .yangshi { min-height: 50px; /* IE6 兼容 */ _height: 50px; width: 150px; border: 1...

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

    在CSS布局设计中,我们经常会使用`max-height`、`min-height`以及`width`属性来控制元素的尺寸,确保其在不同场景下有合适的显示效果。然而,不幸的是,在Internet Explorer 6(简称IE6)这个古老的浏览器版本中,...

    css开发字典

    - 可以通过`max-width`和`max-height`属性限制元素的大小。 **Length(长度)** - 物体的延伸距离。 - 在CSS中,长度单位包括像素、厘米、毫米、英寸等。 **Medium(中等)** - 描述尺寸或程度的中等程度。 - 可以...

    让IE支持CSS3 Media Query实现响应式Web设计

    - `width:auto\9`:这是一种针对IE6/IE7/IE8/IE9/IE10的CSS hack,意思是如果浏览器是IE系列,则应用这条样式规则。 - `width:auto\0`:这是专门针对IE8/IE9/IE10的CSS hack。 - `width:auto\9\0`:这是专门针对IE9/...

    IE的CSS制作网页技巧3则

    IE6不支持CSS的`min-width`和`max-width`属性,但我们可以通过JavaScript表达式来实现类似的效果。例如: ```css #container{ min-width: 600px; max-width: 1200px; width:expression(document.body....

    DIV+CSS有利学习资源

    **解释:** 由于 IE6 不支持 `min-height`,因此使用了特殊的 CSS hack 技术 `_height` 来兼容。 **完整示例代码:** ```html &lt;!DOCTYPE html&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb...

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

Global site tag (gtag.js) - Google Analytics