<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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: #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="background-color: #ccc;">#ccc</span></p> <p>IE7下背景颜色：<span class="ie7" style="background-color: #666;">#666</span></p> <p>IE8下背景颜色：<span class="ie8" style="background-color: #06f;">#06f</span></p> <p>IE9下背景颜色：<span class="ie9" style="background-color: #f00;">#f00</span></p> <p>IE10下背景颜色：<span class="ie10" style="background-color: #0ff;">#0ff</span></p> <p>webkit,Safari,Chrome下背景颜色：<span class="webkit-safari-gg" style="background-color: #ff0;">#ff0</span></p> <p>FireFox下背景颜色：<span class="firefox" style="background-color: #f0f;">#f0f</span></p> <p>Opera下背景颜色：<span class="opera" style="background-color: #0f0;">#0f0</span></p> </div> </div> </body> </html>