normalize.css/normalize.css
Jonathan 4f1ba27963 Improved display inline block
Improved <audio> display
Added <input> <select> <textarea> box sizing
2011-05-03 14:17:32 -07:00

300 lines
4.7 KiB
CSS

/*
* Add display for HTML5 elements
* Fixes styling not present in IE6/7/8/9 FF3
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
/*
* Vertical align for display inline block elements
* Improves visual appearance in all browsers
*/
audio[controls],
button,
canvas,
img,
input,
select,
textarea,
video {
display: inline-block;
*display: inline;
vertical-align: top;
*zoom: 1;
}
/*
* 1.
* Make normal cursor the default for <html> element
* Improves visual focus of page during mouse movement in all browsers
* 2.
* Add vertical scrollbar to <html> element
* Improves page center consistency regardless of content height in all browsers
* 3.
* Remove text size adjust tap color for <html> element
* Fixes tap color displayed oddly in iOS
*/
html {
cursor: default; /* 1 */
overflow-y: scroll; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3 */
}
/*
* Remove margin and hide overflow from <body> element
* Margin overflow displayed incorrectly in IE6/7
*/
body {
margin: 0;
overflow: hidden;
}
/*
* 1.
* Make outline thin dotted for <a>
* Fixes outline displayed oddly in C10
* 2.
* Remove outline for <a> element when active or hovered
* Improves readability when focused and also mouse hovered in all browsers
*/
/* 1 */
a:focus {
outline: thin dotted;
}
/* 2 */
a:active,
a:hover {
outline: none;
}
/*
* Make display based on controls for <audio> element
* Fixes styling not present in IE6/7/8
*/
audio {
display: none;
}
audio[controls] {
_display: expression(this.controls ? 'inline' : 'none');
}
/*
* 1.
* Disable border for <img> element
* Improves readability when inside <a> element in all browsers
* 2.
* Allow high quality bicubic image resampling for <img> element
* Improves readability when scaled in IE7
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/*
* Add bottom border to <abbr> element
* Fixes styling not present in IE6/7/8/9 C10 S5
*/
abbr[title] {
border-bottom: 1px dotted;
}
abbr {
_border-bottom: expression(this.title ? '1px dotted' : 'none');
}
/*
* Add italic font style to <dfn> element
* Fixes styling not present in C10 S5
*/
dfn {
font-style: italic;
}
/*
* Add yellow background and black text to <mark> element
* Fixes styling not present in IE6/7/8/9
*/
mark {
background-color: #FF0;
color: #000;
}
/*
* Redeclare monospace font family to <pre> <code> <kbd> <samp> elements
* 1.
* Fixes font family set oddly in C10 S5
* 2.
* Fixes monospace font family set oddly in IE6
* 3.
* Fixes monospace line-height overflow in iOS
*/
pre,
code,
kbd,
samp {
font-family: monospace, sans-serif; /* 1 */
_font-family: 'Courier New', monospace, sans-serif;/* 2 */
vertical-align: top; /* 3 */
}
/*
* Allow line wrapping for <pre> element
* Improves readability of pre-formatted text in all browsers
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Remove quotes from <q> element
* 1.
* Addresses CSS quotes not supported in IE6/7
* 2.
* Addresses quote attributes not supported in S4
*/
/* 1 */
q {
quotes: none;
}
/* 2 */
q:before,
q:after {
content: '';
content: none;
}
/*
* Define alignment for <small> <sub> <sup> elements
* Fixes alignment within multi-line text displayed oddly in all browsers
*/
small {
font-size: 75%;
line-height: 1;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
}
sup {
top: 0.75em;
vertical-align: top;
}
sub {
bottom: 0.75em;
vertical-align: bottom;
}
/*
* Define alignment for <legend> element
* Fixes alignment displayed oddly in IE6/7
*/
legend {
*margin-left: -7px;
}
/*
* Remove margin from form elements
* Fixes margin displayed oddly in C10 S5
*/
button,
input,
select,
textarea {
margin: 0;
}
/*
* Define inner-spacing for button elements
* Targeting all inputs is harmless to non-button elements
* 1. Fixes spacing displayed oddly in IE6/7
* 2. Fixes border and padding displayed oddly in FF3/4
*/
/* 1 */
button,
input {
*overflow: visible;
}
/* 2 */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* Disable default vertical scrollbar for <textarea> element
* Fixes scrollbar displayed oddly in IE6/7/8/9
*/
textarea {
overflow: auto;
}
/*
* Define box sizing for <input> <select> <textarea> element
* Addresses box sizing not supported in IE6/7
*/
input[type='button'],
input[type='checkbox'],
input[type='radio'],
input[type='submit'],
select {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
input[type='text'],
input[type='password'],
textarea {
-webkit-appearance: textfield;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}