Question

如果只是为了实现max-height：

max-height:200px;
 height:auto !important;
 height:200px;
 overflow:hidden;

如果只是为了实现min-height：

min-height:40px;
height:auto!important;
height:40px;

看？身高有冲突！

解决方案是什么？

Answer 1

如果你想要纯CSS，我会去条件样式表路线。

但是，我首选的解决方案只是一点点jQuery：

  $(document).ready() (function() {
    if ($("#division").height() > 200) {
        $("#division").height('200px');
    }
    if ($("#division").height() < 40) {
        $("#division").height('40px');
    }
  }

Answer 2

我假设你写这样的CSS是因为你想支持Internet Explorer，它无法识别min-height max-height。

我建议你把所有内容都移到条件样式表中，只有IE才会使用：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

阅读this以获取有关此技术的更多信息。这是处理Explorer问题的唯一正确方法。

Answer 3

这是一种源自article on min-height and max-height in IE：

的技术

* html div#division { 
   height: expression(this.scrollHeight >= 200 ? "200px" : this.scrollHeight <= 40 ? "40px" : "auto");
}

div#division {
   min-height: 40px;
   max-height: 200px;
   overflow: hidden;
}

expression值仅适用于IE，但可以回溯到IE 5.这里，它将height属性保持在所需范围内。符合标准的浏览器将忽略此声明，而是使用min-height和max-height规则。

警告：必须在IE中启用JavaScript才能使expression正常工作。

您目前使用的技术可能是“仅使用纯CSS”人群的首选，但恕我直言，它是模糊和脆弱的。使用非标准的IE特定值可以清楚地表明代码是专门为支持IE而编写的。这不仅可以自我记录，还可以更轻松地将特定于IE的代码迁移到单独的CSS文件中。

Answer 4

试试这个

min-height:500px;
height:auto !important;
height:500px;

如何同时实现跨浏览器的最小高度和最大高度？

4 个答案: