本文向大家描述一下如何使用CSS Hack技巧解决DIV+CSS布局多浏览器兼容问题,针对不同的浏览器写不同的CSS代码的过程,就叫CSS Hack,相信本文介绍一定会让你有所收获。
CSS Hack技巧汇总
CSS Hack简介
我们在用DIV+CSS制作网页时,由于不同的浏览器,比如InternetExplorer6,InternetExplorer7,MozillaFirefox等对CSS的支持及解析结果不一样,导致生成的页面效果不一样,得不到我们所需要的页面效果。这时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS代码的过程,就叫CSS Hack。
为了向你展示这些CSS Hack是否正常运作,我新建六个P标签,并给每一个P标签一个特有的id。这将向你展示CSS Hack的运作情况。
- <pidpid="opera">我来自Opera7.2-9.5</p>
- <pidpid="safari">我是神奇的Safari</p>
- <pidpid="firefox">我来自Firefox</p>
- <pidpid="firefox12">我是FF前辈Firefox1-2</p>
- <pidpid="ie7">我是IE7</p>
- <pidpid="ie6">我是残品IE6</p>
然后我让这些P标签默认都不显示
- <styletypestyletype="text/css">
- bodyp{display:none;}
- </style>
使用IE CSS条件注释区分IE浏览器
最简单的区分IE浏览器的方法自然是使用他们的条件注释。微软创建了一个强大的语法来让我们去实现这个功能。我不想再详细地介绍IE条件注释了,我想你在搜索引擎能搜索到上万个搜索条目,我这里只要这两个:
- <!--[ifIE7]>
- <styletypestyletype="text/css">
- </style>
- <![endif]-->
- <!--[ifIE6]>
- <styletypestyletype="text/css">
- </style>
- <![endif]-->