Last active
December 31, 2015 00:29
-
-
Save markyun/7907294 to your computer and use it in GitHub Desktop.
HTML css兼容
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> | |
| <title>CSS Hacks</title> | |
| <style type="text/css"> | |
| li { | |
| background-color: green; | |
| font-size: 1.5em; | |
| font-weight: bold; | |
| color: white; | |
| line-height: 2em; | |
| } | |
| li.ie9 { | |
| background-color: blue; | |
| } | |
| li.ie8 { | |
| background-color: purple; | |
| } | |
| li.ie7 { | |
| background-color: orange; | |
| } | |
| li.ie6 { | |
| background-color: red; | |
| } | |
| div { | |
| width: 500px; | |
| height: 500px; | |
| background-color: green; | |
| background-color: purple\9; | |
| *background-color: orange; | |
| _background-color: red; | |
| } | |
| </style> | |
| <!--[if !IE]><!--> | |
| <style type="text/css"> | |
| div { | |
| background-color: gray; | |
| } | |
| </style> | |
| <!--<![endif]--> | |
| <!--[if IE 9]> | |
| <style type="text/css"> | |
| div { | |
| background-color: blue; | |
| } | |
| </style> | |
| <![endif]--> | |
| <!--[if IE 8]> | |
| <style type="text/css"> | |
| div { | |
| background-color: purple; | |
| } | |
| </style> | |
| <![endif]--> | |
| <!--[if IE 7]> | |
| <style type="text/css"> | |
| div { | |
| background-color: orange; | |
| } | |
| </style> | |
| <![endif]--> | |
| <!--[if IE 6]> | |
| <style type="text/css"> | |
| div { | |
| background-color: red; | |
| } | |
| </style> | |
| <![endif]--> | |
| </head> | |
| <body id="body"> | |
| <ol> | |
| <li>Major browsers</li> | |
| <li class="ie9">IE 9</li> | |
| <li class="ie8">IE 8</li> | |
| <li class="ie7">IE 7</li> | |
| <li class="ie6">IE 6</li> | |
| </ol> | |
| <div id="demo"></div> | |
| </body> | |
| </html> | |
| 让IE系列支持header、nav、section、article、aside、footer等HTML5标签 | |
| <!--[if IE]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
blockdisplay not defined in IE 8/9.*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
inline-blockdisplay not defined in IE 8/9.*/
audio,
canvas,
video {
display: inline-block;
}
/**
audiowithout controls.*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
[hidden]styling not present in IE 8/9.templateelement in IE, Safari, and Firefox < 22.*/
[hidden],
template {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
*/
html {
font-family: sans-serif; /* 1 /
-ms-text-size-adjust: 100%; / 2 /
-webkit-text-size-adjust: 100%; / 2 */
}
/**
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
*/
a {
background: transparent;
}
/**
outlineinconsistency between Chrome and other browsers.*/
a:focus {
outline: thin dotted;
}
/**
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
h1font-size and margin withinsectionandarticle*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
bolderin Firefox 4+, Safari 5, and Chrome.*/
b,
strong {
font-weight: bold;
}
/**
*/
dfn {
font-style: italic;
}
/**
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
*/
mark {
background: #ff0;
color: #000;
}
/**
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
*/
pre {
white-space: pre-wrap;
}
/**
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
*/
small {
font-size: 80%;
}
/**
subandsupaffectingline-heightin all browsers.*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
aelement in IE 8/9.*/
img {
border: 0;
}
/**
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
colornot being inherited in IE 8/9.*/
legend {
border: 0; /* 1 /
padding: 0; / 2 */
}
/**
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 /
font-size: 100%; / 2 /
margin: 0; / 3 */
}
/**
line-heightoninputusing!importantin*/
button,
input {
line-height: normal;
}
/**
text-transforminheritance forbuttonandselect.text-transformvalues.buttonstyle inheritance in Chrome, Safari 5+, and IE 8+.selectstyle inheritance in Firefox 4+ and Opera.*/
button,
select {
text-transform: none;
}
/**
audiovideocontrols.inputtypes in iOS.inputand others.*/
button,
html input[type="button"], /* 1 /
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; / 2 /
cursor: pointer; / 3 */
}
/**
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
content-boxin IE 8/9/10.*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 /
padding: 0; / 2 */
}
/**
appearanceset tosearchfieldin Safari 5 and Chrome.box-sizingset toborder-boxin Safari 5 and Chrome-mozto future-proof).*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 /
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; / 2 */
box-sizing: content-box;
}
/**
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
*/
textarea {
overflow: auto; /* 1 /
vertical-align: top; / 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
http://necolas.github.io/normalize.css/