<!--[if IE]><style></style><![endif]-->

CSS hack就是为了让你的CSS代码兼容不同的浏览器,其中最难对付的就是IE浏览器的兼容性,因为它的版本很多,不过还好,微软发表声明已经不对IE8以下的版本进行维护了。但是我们也不能就认为不用学IE8之前版本的兼容性了。反过来,如果我想在IE浏览器中让元素表现出另外一种样式,我也可以通过CSS hack来实现,所以这招人烦的IE兼容性也可以为自己所用。总之,多学点没有坏处。

CSS hack通常分为 条件Hack、属性hack、选择符hack。下面一一来介绍:

1、条件hack::

表现形式:

  <!--[if  lte  IE 6]>

      <style  type="text/css">

          div{color:red;}

      </style>

     <![endif]-->.

这是一个选择语句,只不过是在特定浏览器下执行。这个语句表明在IE6及6以下版本的IE浏览器中,div中字体的颜色是红色。其中lte表示 Less than or equal to(小于或等于)的简写。既然有小于等于那也可能会有greater or equal to大于等于(gte),gt(大于);lt(小于);如果我想表示样式只对某个版本的IE浏览器才有效,这个语句又该怎么写呢?下面这个语句表明只有在IE8版本的IE浏览器下,div的背景颜色为#ccc;

<!--[if  IE 8]>

    <style   type="text/css">

        div{background:#ccc;}

     </style>

<![endif]-->

那如果我想表示除了某个版本IE浏览器,其余的浏览器都能表现这个样式又该怎么写呢?

<!--[if ! IE 8]>

  <style  type="text/css">

      div{box-sizing:content-box;}

  <style>

<![endif]-->

表明除了IE8之外的所有IE浏览器中,div所占页面的实际尺寸的计算是content+padding*2+border*2;

2、属性hack::

属性hack是指通过只有自己才能识别的出的符号添加在属性的前面,比如,

IE都能识别*  标准浏览器(例如火狐)不能识别*
IE6能识别*,但不能识别  !important
IE7能识别*,也能识别 !important
火狐不能识别*,但能识别!important

只有IE6能识别下划线“_”;

只有IE7能识别 *+

element{_color:#f7f7f7f;}只有IE6能识别,所以在IE6中字体颜色为#f7f7f7;

element{*color:#f7f7f7;}IE6和IE7都能识别;

element{color:red !important;}IE7和火狐浏览器能识别;

3、选择符hack

*+element{color:red;}只有IE7才能识别;

转载于:https://www.cnblogs.com/novice007/p/6910441.html

<!DOCTYPE HTML> <html> <head> <title>搜索网站</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="assets/css/main.css" /> <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]--> <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> </head> <body> <!-- Wrapper --> <div id="wrapper"> <!-- Header --> <header id="header"> <div class="logo"> <span class="icon fa-diamond"></span> </div> <div class="content"> <div class="inner"> <h1>你好</h1> <p><!--[-->尊敬的用户,欢迎使用本网站<!--]--></p> <p><!--[-->本网站将为将您提供一下服务,如您有更好的意见,欢迎致信我们的邮箱 <!--]--></p> <p><!--[-->2653379060@qq.com<!--]--></p> <p><!--[-->感谢您的支持<!--]--></p> </div> </div> <nav> <ul> <li><a href="###">首页</a></li> <li><a href="###">热搜</a></li> <li><a href="###">联系</a></li> <li><a href="###">关于</a></li> <!--<li><a href="#elements">Elements</a></li>--> </ul> </nav> </header> <!-- Main --> <!-- Footer --> <footer id="footer"> <p class="copyright">© Untitled. Design: <a href="http://www.baidu.com">百度</a>.</p> </footer> </div> <!-- BG --> <div id="bg"></div> <!-- Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/skel.min.js"></script> <script src="assets/js/util.js"></script> <script src="assets/js/main.js"></script> </body> </html>要在这段代码的左下角放一个轮播图,代码应该怎么写
05-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值