HTML5 new module element compatibility issues

• new block element default style
  The following HTML5 new module elements are not defined by default styles in the IE8, 9 version browser. To resolve this problem, add a "block" display property to the following elements.

  Code:

  article,  aside,  details,  figcaption,  figure, footer, header, hgroup, main, nav, section, summary { display: block; } 

• Special new block elements
  The following HTML5 new module elements are not defined by default styles in the IE8, 9 version of the browser, and are added "Inline-block" Display properties for the following elements, given their specificity.

  Code:

  audio,canvas,video{    display:inline-block;}

• Removal of horizontal voids scheme

  Code:

  display:inline-block; *display:inline; *zoom:1;

  * For a detailed description of Inline-block, click here for details

• Audio Module compatibility issues
  To prevent the main browser from displaying the "Audio module without control button" issue.
  and to address the compatibility issues of IOS5 mobile display excess height.

  Code:

  audio:not([controls]) {    display: none; height: 0;}

• Special Module style handling
  Handles styles that are not defined in IE 8/9.

  Code:

  [hidden]{    display:none;}

Global basic settings

• Default font settings, margin settings

Code:

html {    font-family: sans-serif; /* 默认字体 */ font-size: 100%; /* 在用户调整窗口大小时，字体大小做相应调整。 */ -ms-text-size-adjust: 100%; /* IE浏览器 */ -webkit-text-size-adjust: 100%; /* FireFox浏览器 */}

• Remove default margin

Code:

body{    margin: 0; /* 外边距 */ padding: 0; /* 内边距 */ border: 0; /* 边框 */}

• Link related styles

Code:

a {    text-decoration: none; /* 去除默认下划线 */}a:focus { outline:thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */}a:active, a:hover { outline: 0;}

• Typography-related styles

Code:

H1{/* Make H1 labels consistent with the white and font styles of the section label and the article label. Compatible with different browsers such as Firefox 4+, Safari 5 and Chrome * *Font-size: 2EM;Margin 0.67em0;}Abbr[Title]{Border-bottom: 1px dotted;/* Resolve an undefined problem with the initials style in IE8/9, Safari 5, and chrome */}BStrong{Font-weight:Bold/* Add bold style to Firefox 4+, Safari 5 and chrome */}Dfn{Font-size:Italic/* Add italic style, apply to Safari 5 and chrome */}hr{/* Resolve their compatibility issues in Firefox */-moz-box-sizing:Content-box;Box-sizing:Content-box;Height 0;}Mark{/* Resolve a problem whose style is undefined in IE8/9 */Background #ff0;Color #000;}CodeKbdPreSamp{/* Correct older settings for associated fonts in Safari 5 and chrome */Font-family:monospace, serif;Font-size: 1em;}Or:{/* Improve the readability of the pre label formatted text in all browsers */White-space:Pre-wrap;}Q{/* Set a consistent quote type */Quotes "\201c""\201D""\2018""\2019";}Small{/* Unify compatibility issues with inconsistent font sizes in all browsers */Font-size: 80%;}SubSup{/* in all browsers, prevents "sub" and "SUP" labels from affecting "line-height" Properties */  75%; line-height: 0; position: relative; vertical-align: Baseline;} sup {top:- 0.5EM; }sub { Bottom:-0.25em;}        

• Inline text-related styles

Code:

img {    border: 0; /* 在IE8/9浏览器中，当img标签中包含a标签时，去除img边框属性。 */}svg:not(:root) { overflow: hidden;}

• picture Close-Up related styles
  The "Figure" tab specifies separate stream content (images, charts, photos, code, and so on)

  Code:

  figure {    margin: 0;}

• Form-related styles

Code:

fieldset {/* Define a consistent border, padding, and margins */border:1px solid #c0c0c0; Margin02px; Padding0.35em0.625em0.75em;} Legend {border:0;/* Change the "color" attribute in the Ie8/9 browser without inheriting the problem */padding:0;/* Remove the margin so that people don't lose the style even if the field set is zeroed */}button,input,select,textarea {font-family:inherit;/* Change the associated font property to an issue that is not inherited in the Ie8/9 browser */font-size:100%;/* Change the Font size property in the Ie8/9 browser without inheriting the problem */margin:0;/* Adjust margin settings in Firefox 4+, Safari 5, and Chrome browser compatibility issues */}button,input {line-height:normal;/* Adjust the input form for the "Line-height" attribute of "!important" in the client style sheet under the Firefox 4+ Browser, */}button,select {text-transform:none;/** * Adjust "text-transform" of "button" and "select" to inherit inconsistencies * Other form control elements do not inherit "text-transform" Property * fix "button" tab in Chrome, Safari 5+, The problem of style inheritance in and IE 8+ * Fix the "select" tag in Firefox 4+ and opera in the style inheritance problem */}button,html input[type="Button"],/* Prevent webkit bugs from occurring on Android 4.0.* devices, destroying native "audio" and "video" Control components */input[type="Reset"],input[type="Submit"] {-webkit-appearance:button;/* Correct the problem with the "input" type form style not available in iOS devices */cursor:pointer;/* Enhance the cursor style availability and consistency in the input form and other forms */}button[disabled],html input[disabled] {cursor:Default/* Reset default cursor style for disabled form */}input[type="checkbox"],input[type="Radio"] {box-sizing:border-box;/* Adjust the box model for the size attribute set to "content box" in IE 8/9 */padding:0;/* Remove excess margins in IE 8/9 from the white section */}input[type="Search"] {-webkit-appearance:textfield; / * Compatible with Safari 5 and chrome on "Searchfield" setting on "appearance" Property */-moz-box-sizing:content-box;-webkit-box-sizing:conten T-box; / * Compatible with Safari 5 and chrome on "Border-box" setting on "box-sizing" Property */Box-sizing:content-box;} Input[type="Search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {- Webkit-appearance:none; / * Remove the container padding and search Cancel button properties on the OS X system on safari 5 and Chrome */}button::-moz-focus-inner,input::-moz-focus-inner {//firefox 4+ Browser, remove container padding and Border properties border: 0; padding: 0;} textarea {Overflow:auto; / * In IE 8/9, remove the default vertical scrollbar properties */vertical-align:top; /* Improve text readability and layout in all browsers */}          

HTML5 new module element compatibility issues