首页 > 代码库 > 各个浏览器的判断

各个浏览器的判断

2024-08-23 08:22:17   220人阅读

<!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;
   width: 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 {
   width: 200px;
   height: 200px;
   background: #f60; /*all*/
   background: #06f\9; /*IE*/
   *background: #666; /*IE6,7*/
   _background: #ccc; /*IE6*/
  }
 
  /* webkit and opera */
  @media all and (min-width: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-width:0) {
   .content .test{
    background: #f00\9;
    }
  }
 
  /*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>

各个浏览器的判断


联系
我们