互零云
分享

企业网站建设

:root#test{background-color:purple\\9;:root#test{background-color:purple\\9;}  @mediaalland(min-width:0px){#test{background-color:black\\0;...

企业网站建设
立即查看
//各种浏览器的csshack的不同版本(ie6789/360/Firefox/Opera/Chrome/Safari等)

各种浏览器的csshack的不同版本(ie6789/360/Firefox/Opera/Chrome/Safari等)

时间 : 2020-01-13 22:20栏目 : 企业网站建设

在这一浏览器百花争鸣的时期,做为前端开发开发的人们以便人们好看的设计能融入每个浏览器能为费尽心思,关键反映在javascript和css上边。javascript我此次也不谈了,先讲讲css。<\/p>

为 了融入不一样浏览器不一样的版本(版本关键就ie而言),ie这朵奇怪如今人们要适配6-9,它的10也快出来。。。在ie下人们能够写标准注解来区别ie 和别的浏览器,及其ie的版本,这种请大伙儿自主google。本文关键探讨的是css hack。下边空话补再多了,立即上编码

 


 


 


    Css Hack<\/title>  <br><br><br>     <style>  <br><br><br>     #test   <br><br><br>     {   <br><br><br>         width:300px;   <br><br><br>         height:300px;   <br><br><br>           <br><br><br>         background-color:blue;      \/*firefox*\/<br><br><br>         background-color:red\\9;      \/*all ie*\/<br><br><br>         background-color:yellow\\0;    \/*ie8*\/<br><br><br>         background-color:pink;        \/*ie7*\/<br><br><br>         _background-color:orange;       \/*ie6*\/<br><br><br>     }  <br><br><br>     :root #test { background-color:purple\\9; }  \/*ie9*\/<br><br><br>     @media all and (min-width:0px){ #test {background-color:black\\0;} }  \/*opera*\/<br><br><br>     @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  \/*chrome and safari*\/<br><br><br>     <\/style>  <br><br><br> <\/head>  <br><br><br> <body>  <br><br><br>     <div id=\"test\">test<\/div>  <br><br><br> <\/body>  <br><br><br> <\/html><\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">上边这一段编码大伙儿能够立即copy出去,储存成html在各浏览器试一下。下边我来解析下:<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    background-color:blue; 每个浏览器都了解,这儿给firefox用;<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    background-color:red\\9;\\9全部的ie浏览器可分辨;<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    background-color:yellow\\0; \\0 是留给ie8的,但笔者检测,发觉最新版本opera也了解,汗。。。但是稍等,后边已有hack写了给opera认的,因此,\\0人们就觉得是给ie8留的;<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    background-color:pink; ie7定了;<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    _background-color:orange; _专业留给奇妙的ie6;<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    :root #test { background-color:purple\\9; } :root是给ie9的,在网上广为流传了个版本是 :root #test { background-color:purple\\0;},呃。。。这一。。。,新版本opera也了解,因此经笔者不断认证最后ie9独有的为:root 选择符 {特性\\9;}<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    @media all and (min-width:0px){ #test {background-color:black\\0;} } 这一是总是跟ie抢着认\\0的奇妙的opera,务必加个\\0,要不然firefox,chrome,safari也都了解。。。<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最终这一是浏览器新宠chrome和safari的。<\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\"> <\/p> <p style=\"margin: 1em 0px; padding: 0px; border: none; text-indent: 2em; color: rgb(43, 43, 43); font-family: 宋体, Arial, sans-serif; font-size: 15px; line-height: 25px;\">    好啦就那么多了,需注意左右次序是不能更改的。css hack尽管能够处理个浏览器中间css显示信息的差别难题,可是终究不符W3C标准,人们平常写css最好依照规范来,那样对人们之后维护保养都是多有益处的,确实不好再用。<br><br> 转自网络,参照学习培训的用处。<\/p> <\/div> <br/> <p>本篇文章《<a href="/qywzjs/375.html">各种浏览器的csshack的不同版本(ie6789/360/Firefox/Opera/Chrome/Safari等)</a>》由<互零云>原创,如需转载请加上来源!</p> <div class="clearfix"></div> <ul class="post-counter single-post-counter"> <li><i class="fa fa-eye"></i><span><script src="/plus/count.php?view=yes&aid=375&mid=1"type='text/javascript' language="javascript"></script></span></li> <li><i class="fal fa-comments-alt"></i><span>0</span></li> </ul> </div> </div> <!-- post end--> <!-- post-author--> <div class="post-author"> <div class="author-img"> <img alt='互零云' src="/templets/jz/images/avatar/logot.jpg"> </div> <div class="author-content"> <h5><a href="htts://www.chuway.com">互零云</a></h5> <p>专业网站建设、网站制作、网站设计、手机APP应用开发、微信公众号开发、微信小程序开发,软件系统定制开发,欢迎大家联系我们! </p> </div> </div> <!--post-author end--> </div> <!-- blog-sidebar --> <div class="col-md-4"> <div class="blog-sidebar fl-wrap fixed-bar"> <!-- widget-wrap --> <div class="widget-wrap fl-wrap"> <h4 class="widget-title"><span>01.</span> 最新 </h4> <div class="widget-container fl-wrap"> <div class="widget-posts fl-wrap"> <ul> <li class="clearfix"> <a href="/qywzjs/479.html" class="widget-posts-img"><img src="/uploads/news/14/20200115/nopic.gif" class="respimg" alt="因特网的发展"></a> <div class="widget-posts-descr"> <a href="/qywzjs/479.html" title="因特网的发展">因特网的发展</a> <span class="widget-posts-date"> 2020-01-15 </span> </div> </li> <li class="clearfix"> <a href="/qywzjs/866.html" class="widget-posts-img"><img src="/images/defaultpic.gif" class="respimg" alt="我们为一周的研究付费,"></a> <div class="widget-posts-descr"> <a href="/qywzjs/866.html" title="我们为一周的研究付费,">我们为一周的研究付费,</a> <span class="widget-posts-date"> 2020-01-18 </span> </div> </li> <li class="clearfix"> <a href="/qywzjs/811.html" class="widget-posts-img"><img src="/uploads/news/14/20200118/20170831100529678.jpg" class="respimg" alt="网络动态艺术设计的互动"></a> <div class="widget-posts-descr"> <a href="/qywzjs/811.html" title="网络动态艺术设计的互动">网络动态艺术设计的互动</a> <span class="widget-posts-date"> 2020-01-18 </span> </div> </li> <li class="clearfix"> <a href="/qywzjs/986.html" class="widget-posts-img"><img src="/images/defaultpic.gif" class="respimg" alt="电子商务支付流程返回逻"></a> <div class="widget-posts-descr"> <a href="/qywzjs/986.html" title="电子商务支付流程返回逻">电子商务支付流程返回逻</a> <span class="widget-posts-date"> 2020-01-21 </span> </div> </li> <li class="clearfix"> <a href="/qywzjs/732.html" class="widget-posts-img"><img src="/uploads/news/14/20200117/20170219032842313.jpg" class="respimg" alt="微信applet的外观会有什么"></a> <div class="widget-posts-descr"> <a href="/qywzjs/732.html" title="微信applet的外观会有什么">微信applet的外观会有什么</a> <span class="widget-posts-date"> 2020-01-17 </span> </div> </li> <li class="clearfix"> <a href="/qywzjs/449.html" class="widget-posts-img"><img src="/uploads/news/14/20200115/20151212113157481.jpg" class="respimg" alt="如何正确理解网站建设中"></a> <div class="widget-posts-descr"> <a href="/qywzjs/449.html" title="如何正确理解网站建设中">如何正确理解网站建设中</a> <span class="widget-posts-date"> 2020-01-15 </span> </div> </li> </ul> </div> </div> </div> <!-- widget-wrap end --> <!-- widget-wrap --> <div class="widget-wrap fl-wrap"> <h4 class="widget-title"><span>02.</span> 标签</h4> <div class="widget-container fl-wrap"> <ul class="tagcloud"> <li><a href="/tag/zibowangzhanjianshe_1.html" class="transition link">淄博网站建设</a></li> <li><a href="/tag/zhengfuwangzhanmoban_1.html" class="transition link">政府网站模板</a></li> <li><a href="/tag/aspwangzhanyuanma_1.html" class="transition link">asp网站源码</a></li> <li><a href="/tag/changshazuowangzhande_1.html" class="transition link">长沙做网站的</a></li> <li><a href="/tag/lanzhouwangzhanzhizuo_1.html" class="transition link">兰州网站制作</a></li> <li><a href="/tag/jianwangzhanyaoduoshaoqian_1.html" class="transition link">建网站要多少钱</a></li> <li><a href="/tag/zenyangyouhuawangzhan_1.html" class="transition link">怎样优化网站</a></li> <li><a href="/tag/jinjiangwangzhanjianshe_1.html" class="transition link">晋江网站建设</a></li> <li><a href="/tag/zhanshixingwangzhansheji_1.html" class="transition link">展示型网站设计</a></li> <li><a href="/tag/wangzhantexiao_1.html" class="transition link">网站特效</a></li> <li><a href="/tag/rizhaowangzhanjianshe_1.html" class="transition link">日照网站建设</a></li> <li><a href="/tag/kaixianwangzhanjianshe_1.html" class="transition link">开县网站建设</a></li> <li><a href="/tag/fuzhouwangzhanyouhua_1.html" class="transition link">福州网站优化</a></li> <li><a href="/tag/dalianwangzhanjianshe_1.html" class="transition link">大连网站建设</a></li> <li><a href="/tag/hangzhouseowangzhanyouhua_1.html" class="transition link">杭州seo网站优化</a></li> </ul> </div> </div> <!-- widget-wrap end --> </div> </div> <!-- blog-sidebar end --> <div class="limit-box fl-wrap"></div> </div> </div> <!-- blog-container end --> </div> <div class="bg-parallax-module" data-position-top="50" data-position-left="20" data-scrollax="properties: { translateY: '-250px' }"></div> <div class="bg-parallax-module" data-position-top="40" data-position-left="70" data-scrollax="properties: { translateY: '150px' }"></div> <div class="bg-parallax-module" data-position-top="80" data-position-left="80" data-scrollax="properties: { translateY: '350px' }"></div> <div class="bg-parallax-module" data-position-top="95" data-position-left="40" data-scrollax="properties: { translateY: '-550px' }"></div> <div class="sec-lines"></div> </section> <!-- section end--> <!-- section--> <section class="dark-bg2 small-padding order-wrap"> <div class="container"> <div class="row"> <div class="col-md-8"> <h3>准备开始您的项目吗?</h3> </div> <div class="col-md-4"> <a href="/contact/" class="btn flat-btn color-btn">联系我们</a> </div> </div> </div> </section> <!-- section end--> </div> <!-- Content end --> <!-- footer--> <div class="height-emulator fl-wrap"></div> <footer class="main-footer fixed-footer"> <!--footer-inner--> <div class="footer-inner fl-wrap"> <div class="container"> <div class="partcile-dec" data-parcount="90"></div> <div class="row"> <div class="col-md-2"> <div class="footer-title fl-wrap"> <span>互零云</span> </div> </div> <div class="col-md-5"> <div class="footer-header fl-wrap">公司业务</div> <div class="footer-box fl-wrap"> <div class="twitter-swiper-container fl-wrap" id="twitts-container"></div> <a href="https://www.hu-ling.cn" target="_blank" class="btn float-btn trsp-btn">互零官网</a> <a href="https://design.hu-ling.cn" target="_blank" class="btn float-btn trsp-btn">高端UI设计</a> <a href="https://xcx.hu-ling.cn" target="_blank" class="btn float-btn trsp-btn">小程序开发</a> <a href="https://app.hu-ling.cn" target="_blank" class="btn float-btn trsp-btn">APP应用开发</a> <a href="https://html.hu-ling.cn" target="_blank" class="btn float-btn trsp-btn">企业网站建设</a> <a href="https://www.chuway.com" target="_blank" class="btn float-btn trsp-btn">网站定制开发</a> <a href="https://project.hu-ling.cn" target="_blank" class="btn float-btn trsp-btn">模板网站建设</a> </div> </div> <div class="col-md-5"> <div class="footer-header fl-wrap"><span>联系</div> <!-- footer-box--> <div class="footer-box fl-wrap"> <p>专业、优秀、放心、价格透明—做企业靠谱的技术合伙人!</p> <div class="subcribe-form fl-wrap"> <form id="subscribe" class="fl-wrap"> <input class="enteremail" name="email" id="subscribe-email" placeholder="电子邮箱" spellcheck="false" type="text"> <button type="submit" id="subscribe-button" class="subscribe-button"><i class="fal fa-paper-plane"></i> 发送 </button> <label for="subscribe-email" class="subscribe-message"></label> </form> </div> <!-- footer-contacts--> <div class="footer-contacts fl-wrap"> <ul> <li><i class="fal fa-phone"></i><span>电话微信 :</span><a target="_blank" rel="nofllow" href="tel:17777461115">17777461115</a></li> <li><i class="fal fa-envelope"></i><span>电子邮箱 :</span><a target="_blank" rel="nofllow" href="mailto:1054271887@qq.com">1054271887@qq.com</a></li> <li><i class="fal fa-map-marker"></i><span>地址</span><a rel="nofllow" target="_blank" href="https://map.baidu.com/search/%E5%B9%BF%E5%B7%9E%E4%BA%92%E9%9B%B6%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%20%E5%9C%B0%E5%9D%80/@12624427.915,2630241.34,19z?querytype=inf&uid=277c1e055eb8782b9022e055&wd=%E5%B9%BF%E5%B7%9E%E4%BA%92%E9%9B%B6%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%2B%E5%9C%B0%E5%9D%80&all=1&c=304&provider=pc-aladin&da_src=shareurl" >广州市天河区东圃镇盛群商贸园1307室</a></li> </ul> </div> <!-- footer end --> </div> <!-- footer-box end--> </div> </div> </div> </div> <!--footer-inne endr--> <!--subfooter--> <div class="subfooter fl-wrap"> <div class="container"> <!-- policy-box--> <div class="policy-box"> <span>© 2020 广州互零网络科技有限公司 版权所有. </span><span>备案号:<a rel="nofollow" href="http://beian.miit.gov.cn/">粤ICP备19032094号-6</a></span> </div> <!-- policy-box end--> <a href="#" title="返回头部" rel="nofllow" target="_blank" class="to-top color-bg"><i class="fal fa-angle-up"></i><span></span></a> </div> </div> <!--subfooter end--> </footer> <!-- footer end--> <!-- contact-btn --> <a class="contact-btn color-bg" href="/contact/"><i class="fal fa-envelope"></i><span>联系</span></a> <!-- contact-btn end --> </div> <!-- content end --> </div> <!-- Main end --> <!--=============== scripts ===============--> <script type="text/javascript" src="/templets/jz/js/jquery.min.js"></script> <script type="text/javascript" src="/templets/jz/js/plugins.js"></script> <script type="text/javascript" src="/templets/jz/js/scripts.js"></script> </body> </html>