css hack! (max-width,min-width以及高度自适应)

最新推荐文章于 2024-07-30 15:09:23 发布

哈哈一族

最新推荐文章于 2024-07-30 15:09:23 发布

阅读量3.9k

点赞数

分类专栏： DIV+CSS(前端)

本文链接：https://blog.csdn.net/wuhuang040924/article/details/49275435

版权

DIV+CSS(前端) 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先来看下什么是css hack?!

针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

IE6能识别下划线"_"和星号" * "

IE7能识别星号" * "，但不能识别下划线"_"

而firefox两个都不能认识

ff, ie7以上能识别 !important, !important是优先级

总结：*开头的css属性能被ie6和ie7识别；_开头的css属性只能被ie6识别；前面两个高版本浏览器都不识别；ff，ie7，chrome以上能识别 !important, !important表示优先级高

早上一直纠结在min-height:200px !important和height:auto !important之间

想说我设置了 !important，那么应该是min-height:200px先生效。我简直就是猪头了。!important是针对相同的属性才生效，并且是ff，ie7，google以上才生效。比如在height:200px; height:auto !important才会按照height:auto !important优先生效。

我们看下高度自适应的一个例子

<html>
<head>
<title>CSS全兼容根据内容自适应高度</title>
<style type="text/css">
.left{width:200px;float:left;background:#ccc;color:#993399;min-height:400px;height:auto !important;max-height:600px;height:20px;overflow:visible;}
.right{width:200px;float:left;background:#999;color:#fff;height:100px;text-align:right}
</style>
</head>

<body>
<p>背景一直铺满div，如果不高度自适应会导致背景铺不满！<br />左右两边是对比，左边代码是兼容所有浏览器，右边在ff、google等浏览器不兼容，ie6下即使不指定高度，也会根据内容自动铺满！<br />height:auto默认属性，所有浏览器都支持，高度自适应</p>
<div class="left">左侧，左侧，左侧，左侧，左侧，左侧，左侧，左侧，有质量的学习型源代码资料站。<br /><br /><br /><br />左侧，左侧，左侧，左侧，左侧，左侧，左侧，左侧，有质量的学习型源代码资料站。<br />fsdfdsfsfd</div>
<div class="right">右侧，右侧，右侧，右侧，右侧，右侧，右侧，右侧，有质量的学习型源代码资料站。<br /><br /><br /><br />右侧，右侧，右侧，右侧，右侧，右侧，右侧，右侧，有质量的学习型源代码资料站。</div>
</body>
</html>