CSS最大最小宽高兼容

最新推荐文章于 2022-07-17 18:22:09 发布

weixin_30248399

最新推荐文章于 2022-07-17 18:22:09 发布

阅读量90

点赞数

原文链接：http://www.cnblogs.com/baixc/p/3670613.html

版权

利用css表达式和三目运算*没有特别需要，坚决不用css表达式！

01.高度固定设置最大宽度

.maxWidth{
    max-width: 200px;
    height: 60px;
    overflow: auto;
    _width:expression(document.body.clientWidth > 150 ? "150px" : "auto");
    /*_width:expression(document.body.clientWidth < 150 ? "150px" : "auto");*//*最小高度*/
}

02.宽度固定设置最小高度

.minHeight{
    max-height: 80px;
    width: 200px;
    overflow: auto;
    /*_height:expression(this.scrollHeight > 80 ? "80px" : "auto");*//*最大高度*/
    _height:expression(this.scrollHeight < 80 ? "80px" : "auto");
}

03.同时设置最大宽度和最小宽度

.min_and_max_width{
    min-width:100px;
    max-width:150px;
    height: 100px;
    overflow: auto;
    _width: expression(
        document.body.clientWidth < 100 ? "100px" :
        ( document.body.clientWidth > 150 ? "150px" : "auto")
    );
    /*_height: expression(
        this.scrollHeight < 200 ? "200px" :
        ( this.scrollHeight > 400 ? "400px" : "auto")
    );*//*同时设置最大高度和最小高度*/
}