-
Notifications
You must be signed in to change notification settings - Fork 2
Home
-
display: block: Corrects block display not defined for these elements in IE6/7/8/9 & FF3.
-
display: inline-block: Corrects inline-block display not defined in Firefox < 3.5. -
*display: inline; *zoom: 1: Corrects inline-block display not defined in IE6/7.
-
display: none: Modern browsers with support foraudiowill not displayaudioelements that do not have controls. Because the previous rule displaysaudioelements, this rule is needed to ensure that Firefox 3/4/5, Safari 4, and Opera will hideaudioelements that do not have controls. Chrome, Safari 5, and IE9 will never displayaudioelements that lack thecontrolsattribute. -
height: 0: iOS5 leaves excess height onaudioelements without controls. This declaration removes it.
-
display: none: Addresses styling not present in FF3, S4/5, IE7/8/9. No effect on IE6. This rule is separate from the previous one because otherwise IE8 (or any browser that doesn't understand one of the selectors) will drop the entire rule.
-
font-size: 100%: Corrects text resizing oddly in IE6/7 when body font-size is set usingemunits. -
-webkit-text-size-adjust: 100%: Prevents iOS text size adjust after orientation change, without disabling user zoom. -
-ms-text-size-adjust: 100%:
-
font-family: sans-serif: Setting the font-family on body and various form elements ensures font-family consistency between body copy, textarea, and other form elements. Using the sans-serif value will most likely mean Helvetica as the default font for Mac and Arial for Windows.
-
margin: 0: Removes margin in all browsers and addresses margins handled incorrectly in IE6/7. The modern browser default is for an8pxmargin, but this is not considered to be a practical starting point in an author's CSS.
-
outline: thin dotted: WebKit on OSX uses a focus halo of a fixed color (usually blue). Chrome on Windows uses an orange outline. Neither of these outlines change with link or background color and people frequently look to remove it with:focus {outline:0;}. They are also different from the focus outline used by other browsers on Windows or OSX. To improve consistency and avoid either having: a fixed focus style that can clash quite badly or be nearly invisible in certain designs; or removing an important accessibility aide, the outline is normalized to thin and dotted with no fixed color.
-
outline: 0: Improves readability in all browsers when a link gains keyboard focus and it is hovered over with the mouse. The outline is shown only if the link gains keyboard focus. Source
- Normalize the
font-sizeandmargin. IE6/7 do not derive heading font sizes or margins from the ancestralfont-size(i.e., not set inemunits) but set them inptunits. Modern browsers alter thefont-sizeofh1's that are nested withinsectionandarticles. By normalizing the styles both of these issues are avoided.
-
border-bottom: 1px dotted: Addresses styling not present in IE7/8/9, S5, Chrome. By not specifying a border color it defaults to the text color it inherits.
-
font-weight: bold: Addresses style set to 'bolder' in FF3/4, S4/5, Chrome.
-
margin: 1em 40px: Normalize blockquote margins, which differ between modern browsers and IE6/7.
-
font-style: italic: Addresses styling not present in S5, Chrome.
-
background: #ff0; color: #000: Addresses styling not present in IE6/7/8/9.
-
margin: 1em 0: Addresses the fact that IE6/7 do not set the margins inemunits. This is contrary to the HTML5 recommendations and to the defaults of modern browsers.
-
font-family: monospace, serif: Allows proper font-size control. Source -
_font-family: 'courier new', serif: Improves poor text-rendering of monospace in IE6. -
font-size: 1em: Set font-size to be equal to ancestor's font-size.
-
white-space: pre: This value makes the element behave as apre: all line breaks, tabs and other oddities of the source code are literally followed. -
white-space: pre-wrap: This value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box. But it is not supported by IE6/7, so... -
word-wrap: break-word: ...this property allows long words to be broken and wrap onto the next line in IE6/7.
-
quotes: none: Remove CSS quotes as they are not supported in IE6/7.
-
content: "": Replace pseudo-element content with an empty string. This is needed because Safari 4 does not support thequotesproperty, or anonevalue for thecontentproperty, and will otherwise display quotes as generated content in pseudo-elements. -
content: none: Display no pseudo-element content if the browser supports thenonevalue.
-
font-size: 75%:
Prevents sub and sup affecting line-height in all browsers. Source
-
font-size: 75%: Specified in % so that the sup/sup is the right size relative to the surrounding text. -
line-height: 0: Zero out the line-height so that it doesn't interfere with the positioning that follows. -
position: relative: Make all browsers position the sup/sup relative to the surrounding text. -
vertical-align: baseline: Set the vertical alignment from the baseline.
-
top: -0.5em: Move the superscripted text up.
-
bottom: -0.25em: Move the subscripted text down, but only half as far down as the superscript moved up.
-
margin: 1em 0: The margin of lists in IE6/7 is set using 'pt' units rather than being relative to the ancestral font-size. This is contrary to the HTML5 spec and other modern browsers. Furthermore, IE6/7 apply a left margin by default toolandul. This normalization corrects both issues.
-
margin: 0 0 0 40px: Corrects the difference between IE6/7 and modern browsers. By default, the left margin is30pxin IE6/7.
-
padding: 0 0 0 40px: Set the left padding to match modern browser default and ensure that bullets remain visible in IE6/7
-
list-style: none: -
list-style-image: none: A fix for an IE7 bug. Usinglist-style:nonealone will not remove list images that are set onulinsidenav.
-
border: 0: Removes border when inside 'a' element in IE6/7/8/9 and Firefox 3.* -
-ms-interpolation-mode: bicubic: Improves image quality when scaled in IE7. It is on by default in IE8 and is not implemented in IE6. More info
-
overflow: hidden: Corrects overflow not being hidden in IE9. Earlier versions of IE don't support SVG, so we can safely use the:not()and:rootselectors that modern browsers use in the default UA stylesheets to apply this style. SVG Mailing List discussion
-
margin: 0: Addresses margin not present in IE6/7/8/9, S5, O11.
-
margin: 0: Corrects margin displayed oddly in IE6/7.
-
border: 1px solid #c0c0c0: Addresses IE rendering rounded corners onfieldsetby default, and inconsistent rendering of the border width, color, and joining in other browsers. -
margin: 0 2px: -
padding: 0.35em 0.625em 0.75em:
-
border: 0: Correctscolornot being inherited in IE6/7/8/9. -
padding: 0: Remove default 2px horizontal padding. -
white-space: normal: Allow legend text to wrap in FF3. -
*margin-left: -7px: Corrects alignment displayed oddly in IE6/7.
-
font-size: 100%: Corrects font size not being inherited in all browsers. -
margin: 0: Addresses margins set differently in IE6/7, F3/4, S5, Chrome. -
vertical-align: baseline: Produces best looking alignment in modern browsers. -
*vertical-align: middle: Improves appearance in IE6/7 to more closely match baseline value position in other browsers.
-
line-height: normal: FF3/4 sets line-height using !important in the UA stylesheet. This declaration is to set all other browsers to match the FF3/4 style.
-
cursor: pointer: Improves usability by indicating that an action will be performed. Typeimagealready has pointer cursor, so this also improves consistency between relatedinputtypes. -
-webkit-appearance: button: Corrects inability to style clickable 'input' types in iOS. -
*overflow: visible: Corrects inner spacing displayed oddly in IE7. Doesn't effect IE6; there doesn't seem to be a way to apply it to IE6 (without using a class) and avoid triggering a serious bug in textinput's. This style, when applied to text inputs in IE6/7, causes them to expand as more content is written into them. This happens even if there is a fixed width applied. If you need to fix the excess inner-spacing bug onbuttonand clickable inputs in IE6, then apply this style using a class that is used specifically to style those types of elements.
-
cursor: default: Re-set the cursor on disabled form inputs.
-
box-sizing: border-box: Normalizes the box sizing, which is set tocontent-boxin IE8/9 butborder-boxin all other browsers. -
padding: 0: Corrects excess space around these inputs in IE8/9 and matches Firefox's UA style sheet setting ofpadding: 0 !important. -
*width: 13px; *height: 13px: Corrects excess space around these inputs in IE7 by setting explicit dimensions. IE6 remains unaffected.
-
-webkit-appearance: textfield: Addresses appearance set tosearchfieldin Safari 5 and Chrome, without removing the benefits of search inputs (e.g. showing past searches).If the
-webkit-appearanceproperty value is not changed fromsearchfield:...in WebKit on OSX/iOS you can't control font, padding, border, and background.
...in WebKit on Windows you can't control border properly. It will apply
border-widthbut will only show a border color (which cannot be controlled) for the outer 1px of that border. -
-webkit-box-sizing: content-box: Normalizes the box sizing, which is set toborder-boxin Safari 5 and Chrome butcontent-boxin all other browsers. -
-moz-box-sizing: content-box: Future-proofing. -
box-sizing: content-box: Future-proofing.
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {}
-
-webkit-appearance: none: Remove excess inner padding that appears in Safari 5 and Chrome on OSX once the search input appearance has been changed totextfield. Remove the search input cancel button from Safari 5 and Chrome on OSX once the search input appearance has been changed totextfield. This pseudo-element is not present in other UAs.
-
border: 0; padding: 0: Removes inner padding and border from FF3/4.
-
overflow: auto: Removes default vertical scrollbar on empty textarea in IE6/7/8/9. -
vertical-align: top: Improves readability and alignment in all browsers when accompanied bylabeltext.
-
border-collapse: collapse: -
border-spacing: 0: