• 各个浏览器的判断


    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <title>CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera-前端开发</title>
     <style type="text/css">
      * {
       margin: 0;
       padding: 0;
      }
     
      .content {
       margin: 50px auto 0;
        480px;
       height: 200px;
       border: 10px solid #444;
       padding: 5px;
     
       -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
       -ms-border-radius: 3px;
       -o-border-radius: 3px;
       border-radius: 5px;
      }
     
      .content .test,
      .content .txt {
       float: left;
      }
     
      .content .txt {
       margin: 2px 0 0 10px;
       _margin-top: 4px;
      }
     
      .content p {
       margin-top: 4px;
       _margin-top: 2px;
       height: 20px;
       font: 14px "Microsoft YaHei", arial, serif;
       color: #666;
      }
     
      .content p span {
       color: #000;
       padding: 0 5px;
      }
     
      .content .test {
        200px;
       height: 200px;
       background: #f60; /*all*/
       background: #06f9; /*IE*/
       *background: #666; /*IE6,7*/
       _background: #ccc; /*IE6*/
      }
     
      /* webkit and opera */
      @media all and (min-0){
       .content .test {
        background: #0f0;
       }
      }
     
      /* webkit */
      @media screen and (-webkit-min-device-pixel-ratio:0) {
       .content .test {
        background: #ff0;
       }
      }
     
      /*FireFox*/
      @-moz-document url-prefix() {
       .content .test {
        background: #f0f;
       }
      }
     
      /*IE9+*/
      @media all and (min-0) {
       .content .test{
        background: #f009;
        }
      }
     
      /*IE10+*/
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       .content .test {
        background: #0ff;
       }
      }
     </style>
    </head>
    <body>
     <div class="content">
      <div class="test"></div>
      <div class="txt">
       <p>IE6下背景颜色:<span class="ie6" style="">#ccc</span></p>
       <p>IE7下背景颜色:<span class="ie7" style="">#666</span></p>
       <p>IE8下背景颜色:<span class="ie8" style="">#06f</span></p>
       <p>IE9下背景颜色:<span class="ie9" style="">#f00</span></p>
       <p>IE10下背景颜色:<span class="ie10" style="">#0ff</span></p>
       <p>webkit,Safari,Chrome下背景颜色:<span class="webkit-safari-gg" style="">#ff0</span></p>
       <p>FireFox下背景颜色:<span class="firefox" style="">#f0f</span></p>
       <p>Opera下背景颜色:<span class="opera" style="">#0f0</span></p>
      </div>
     </div>
    </body>
    </html>
  • 相关阅读:
    217. 存在重复元素
    189. 旋转数组
    122. 买卖股票的最佳时机 II
    26. 删除排序数组中的重复项
    [剑指Offer]二进制中1的个数
    [Unity]Unity更改黑色主题(个人版)
    [Unity]限制两个物体之间的距离
    [Untiy]贪吃蛇大作战(五)——游戏主界面
    sql server 函数详解(3)数据类型转换函数和文本图像函数
    sql server 函数详解(2)数学函数
  • 原文地址:https://www.cnblogs.com/damsoft/p/6103554.html
Copyright © 2020-2023  润新知