/*-------- Chrome Safari -------------*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.test {
padding: 5px 5px;
}
}
/*-------- Chrome Safari END -------*/
/*--------------- Safari -------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
body { background:#00CCCC; }
/* Safari only override */
body { background:#00CCCC; }
::i-block-chrome, body { background:#FF0000; }
}
/*-------------- Safari End -------------*/
/*-------------- Opera ----------------*/
@media not all and (-webkit-min-device-pixel-ratio:0) {
--- opera old version -----
}
@media not screen and (1) { /* OPERA 11.00 */
input[type="radio"] {
box-sizing: content-box;
height: 3px !important;
width: 3px !important;
float:left!important;
}
}
@media (min-resolution: .001dpcm) {
Opera 12+Somthing
}
/*------------ Opera END ---------*/
/*-------------- IE 8---------------*/
@media \0screen {
}
/*----------- IE 8 END ---------*/
/*--------- IE - 10 --------------*/
@media \0screen {
}
/*------ ie10 end ---------------*/
/*---------- IE 6, 7 and 8 -------*/
@media \0screen\,screen\9 {
}
/*---------IE 6, 7 and 8 END ---------*/
=========================================
============== Other Demos ================
=========================================
=============== Safsri =====================
<style>
.safari .example { background:#996699; }
</style>
<body>
<script>
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
document.body.className += " safari";
}
</script>
</body>
=============== Safsri End===================
<body>
<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
</body>
<style type="text/css">
/*---IE-All---*/
.ie .example {
background-color: yellow;
}
/*---IE-7---*/
.ie7 .example {
background-color: orange;
}
.gecko .example {
background-color: gray;
}
/*---Fire-Fox---*/
.win.gecko .example {
background-color: red;
}
.linux.gecko .example {
background-color: pink;
}
/*---Opera---*/
.opera .example {
background-color: green;
}
.konqueror .example {
background-color: blue;
}
/*---Safari---*/
.webkit .example {
background-color: black;
}
.example {
width: 100px;
height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>
</head>
</html>
=========================================
=========================================
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
.ie7 .example {
background-color: orange;
}
.ie8 .example {
background-color: orange;
}
.ie9 .example {
background-color: orange;
}
=========================================
========= Compatible View Issue IE 7,8,9 ========
This is how I've fixed issues like this. Add this to your
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
========= Compatible View Issue IE 7,8,9 ========
=========================================
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.test {
padding: 5px 5px;
}
}
/*-------- Chrome Safari END -------*/
/*--------------- Safari -------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
body { background:#00CCCC; }
/* Safari only override */
body { background:#00CCCC; }
::i-block-chrome, body { background:#FF0000; }
}
/*-------------- Safari End -------------*/
/*-------------- Opera ----------------*/
@media not all and (-webkit-min-device-pixel-ratio:0) {
--- opera old version -----
}
@media not screen and (1) { /* OPERA 11.00 */
input[type="radio"] {
box-sizing: content-box;
height: 3px !important;
width: 3px !important;
float:left!important;
}
}
@media (min-resolution: .001dpcm) {
Opera 12+Somthing
}
/*------------ Opera END ---------*/
/*-------------- IE 8---------------*/
@media \0screen {
}
/*----------- IE 8 END ---------*/
/*--------- IE - 10 --------------*/
@media \0screen {
}
/*------ ie10 end ---------------*/
/*---------- IE 6, 7 and 8 -------*/
@media \0screen\,screen\9 {
}
/*---------IE 6, 7 and 8 END ---------*/
=========================================
============== Other Demos ================
=========================================
=============== Safsri =====================
<style>
.safari .example { background:#996699; }
</style>
<body>
<script>
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
document.body.className += " safari";
}
</script>
</body>
=============== Safsri End===================
<body>
<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
</body>
<style type="text/css">
/*---IE-All---*/
.ie .example {
background-color: yellow;
}
/*---IE-7---*/
.ie7 .example {
background-color: orange;
}
.gecko .example {
background-color: gray;
}
/*---Fire-Fox---*/
.win.gecko .example {
background-color: red;
}
.linux.gecko .example {
background-color: pink;
}
/*---Opera---*/
.opera .example {
background-color: green;
}
.konqueror .example {
background-color: blue;
}
/*---Safari---*/
.webkit .example {
background-color: black;
}
.example {
width: 100px;
height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>
</head>
</html>
=========================================
=========================================
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
.ie7 .example {
background-color: orange;
}
.ie8 .example {
background-color: orange;
}
.ie9 .example {
background-color: orange;
}
=========================================
========= Compatible View Issue IE 7,8,9 ========
This is how I've fixed issues like this. Add this to your
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
========= Compatible View Issue IE 7,8,9 ========
=========================================
No comments:
Post a Comment