FF、IE7、IE6的CSS问题

最新推荐文章于 2021-09-08 16:45:16 发布

a752711024

最新推荐文章于 2021-09-08 16:45:16 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： css hack 文章标签： CSS IE Firefox HTML 浏览器

本文链接：https://blog.youkuaiyun.com/a752711024/article/details/83533506

css hack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了 CSS 中针对不同浏览器的特殊选择器技巧，包括使用 !important 区分 FF 和 IE，利用 *+html 和 *html 标签区分 IE7 和 IE6，以及通过 min-height 设置最小高度的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章来自于网络

地址：http://www.iteye.com/topic/172342

收藏写出仅供个人学习

1. !important
随着IE7对!important的支持,现在IE7和FF都支持!important，可以用!important来区分FF、IE7和IE6的高度。

用法如下：

Html代码

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px !important;}/* Moz+IE7 */
.content{background:#a5a5a5;height:200px;}/* IE6 */
-->
</style>

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px !important;}/* Moz+IE7 */
.content{background:#a5a5a5;height:200px;}/* IE6 */
-->
</style>

2.IE6/IE7对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签,IE6暂不支持。

用法如下：

Html代码

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px;}/* Moz */
*html .content{background:#a5a5a5;height:200px;}/* IE6 */
*+html .content{background:#a5a5a5;height:300px;}/* IE7 */
-->
</style>

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:100px;}/* Moz */
*html .content{background:#a5a5a5;height:200px;}/* IE6 */
*+html .content{background:#a5a5a5;height:300px;}/* IE7 */ 
-->
</style>

Html代码

height:50px; /*For Firefox*/
*height:100px; /*For IE7 & IE6*/
_height:150px; /*For IE6*/

height:50px; /*For Firefox*/
*height:100px; /*For IE7 & IE6*/
_height:150px; /*For IE6*/

同样可以用相同的原理来为IE6、IE7、FF设置不同的width,height,margin,padding等属性。

3.min-height

IE不认min-height,FF识别,利用以上这些属性，我们可以这样定义最小高度

Html代码

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}
-->
</style>

<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}
-->
</style>

我是这样理解这段代码的：

因为在IE里（包括IE6,IE7）认为height就是最小高度，当content中的内容超出设置的高度时，在FF中可以用min-height设置最小高度××，这时即使超出content的高度，背景颜色也会自动延伸下去。但IE不识别min-height，所以要加hack（对程序所作的修改，在尚未被开发者接受并集成到正式版本中之前被称为hack）。

4.区别不同浏览器，Css hack写法：

区别IE6与FF：
background:orange;       *background:blue;

区别IE6与IE7：
background:green !important;     background:blue;

区别IE7与FF：
background:orange;      *background:green;

区别FF，IE7，IE6：
background:orange;    *background:green !important;    *background:blue;