Browser compatibility issues that we often encounter in those years

Read Catalogue

1. Web Standards and

2. Mainstream browser kernel

3. Standard modes (standards mode) and quirks mode (Quirks modes)

4. CSS Box model

5. Reset Browser Style

6. HTML semantics

7. Precedence of CSS Selectors

8. Double margin Floating problem

9.3 pixel problem

IE6 does not support min-*

IE6 does not support png-24 transparent images

IE6 cannot define containers of around 1px width

Ie5~8 does not support opacity

Firefox Click the dotted box that appears on the link

15. Margin Overlay

16. Picture default Spacing

17. Clear Floating

Do you remember the boys or girls we chased over the years? He or she may never be in your life again, but every day we meet familiar browser-compatibility bugs that are no longer familiar.

Before summarizing the browser problem, I think we should grasp the contents of the 1~7 title in the catalogue, and I think we should know more about the following questions, and can avoid many bugs.

1. Web Standards and

Web standards are developed by the World Wide Web Consortium (WWW), the creation of the Internet standards, Web content can be accessed by more users, file download and page display faster, all pages can provide a suitable version of the print, Web developers faster development, code easier to maintain, improve the accuracy of the search engine Improve the usability of the website.

The Code standards we need to be aware of are:

• Label must be closed (e.g. <br/>)
• lowercase elements and attribute names, unlike HTML, XHTML casing is sensitive
• Labels must be properly nested (e.g.:<div><span></span></div>)
• Attribute values must be quoted (for example:
• CSS style sheets must be placed between
• Special symbols are coded (for example: less than (<), not part of the label, and need to be encoded &lt; expressed. ）
• All attributes are assigned, and XHTML specifies that all properties must have a value, repeating itself without a value
• Not used in annotations--symbols

2. The kernel of the main browser

The browser kernel mainly refers to the browser's rendering engine, which determines how the browser loads and displays the contents and information of the Web page. Our main browsers for testing are: IE, Chrome, Firefox, Safari, Opera, 360 browsers.

• ie: Trident kernel (ie kernel)
• Firefox: Geoko kernel, Mozilla developed a set of open source code, written in C + + rendering engine.
• Safari: The WebKit kernel, an open-source browser engine, originates from an engine on the Linux platform that has been modified by Apple to support Mac and Windows platforms.
• Chrome: Blink core, Google and Opera Software co-developed.
• Opera: Formerly the Presto kernel, now blink kernel.
• 360 browser : Compatibility mode (Trident Core), fast mode (blink core).

3. Standard modes (standards mode) and quirks mode (Quirks modes)

When Netscape Navigator and a handful of Microsoft Internet Explorer browsers prevailed, they had different implementations of Web pages that were written for both browsers. With the advent of various browsers, as well as the development of web standards, the browser cannot continue to use the previous page, so the browser introduced the standard mode and strange mode to solve the problem.

The standard mode is that the browser renders the page according to the Web Standard, and the strange pattern arises in order to solve the browser or to use previously written pages. The quirks mode is different in various browsers because they all render the page in their own way.

We know the standard mode and the weird mode, but how does the browser choose the mode to render the page? We often see <! at the beginning of the page Doctype> declares that this is to tell the browser which version of HTML to choose, and for the choice of rendering mode, the browser is based on the DTD declaration. If a Web page has a declaration of a DTD standard document, the browser renders the page in standard mode, and if the page does not have a DTD declaration or a DTD declaration below the HTML4, the browser renders the page in its own way, and the page enters a weird mode.

4. CSS Box model

If you would like to know more about the explanation, please move to: http://www.cnblogs.com/ylliap/p/6119740.html

The box model specifies how the element is displayed and understands it, which can be of great help to our layout. The box model consists of contents (content), padding (padding), Border (border), margin (margin) .

There are two types of box models: the IE box model ( Figure 1) and the standard box model ( Figure 2). As can be seen from figures 1 and 2, the width of the IE box model includes border, padding, content, and the width of the box model is limited to content.

In the properties of CSS3,box-sizing can set the box model type, the default value is content-box,content-box represents the box model,Border-box represents the IE box model.

Figure 1. IE Box model

Figure 2. Box model

5. Reset Browser Style

Different browsers have different default style values for labels, so we need a style sheet to reset the browser style to avoid the differences in the display of the pages we write in each browser.

• http://cssreset.com/, the site has the most popular CSS reset style sheet that can be copied according to its own needs.

There is also a standardized method, which is a bit different from the Reset method, which standardizes the inconsistencies in the browser, rather than re-modifying those places.

• http://necolas.github.io/normalize.css/, the Web site provides normalize.css style files. (It seems that there is a wall in the country, can only FQ.) ）
• Https://github.com/kristerkari/normalize.scss, you can download the Normalize.scss file on this page. When writing sass, both NORMALIZE.CSS and normalize.scss can be used, referring to the beginning of the style sheet.

6. HTML semantics

HTML semantics is when the page is stripped of style or loading fails to make the page appear clear structure. HTML5 has added a lot of tags, such as header, Footer, nav, menu, section, article, and so on, and we know the meaning of the label simply by literally understanding it. In the writing of the page, we can directly reference these tags, do not need to use no meaning of the div tag, for the machine can be identified, for developers, it is easy to understand, this is the HTML semantics.

HTML semantic benefits are: conducive to SEO optimization, is conducive to search engine inclusion, more convenient search engine crawler to identify, easy to project development and maintenance, make the HTML code more readable, easy to resolve other devices.

7. CSS Selector priority

Master Selector priority, no longer need to!important come to the place to hit the patch.

Basic selector for CSS:

• ID selector (declared with Dom's ID)
• Class selector (declared with a style class name)
• Tag Selector (declared with HTML tags)
• Property selector (with Dom's property declaration)

There is also an add style that can be added directly on the label, which belongs to the inline style.

Here, we only do a simple description, sorted by the above selector: inline element < ID selector < class selector/property Selector < Tag Selector.

We can through Baidu statistics: http://tongji.baidu.com/data/browser/, to view the past two years, the browser market share, ie accounted for is still very large, of which IE6 accounted for 3.45%, in the future the share of IE6 will be more and more small, If it is not strongly required to be compatible with IE6, I think about IE6 compatibility issues, just do understand.

8. Double margin Floating problem

problem appears in the browser: IE6 and its lower version

problem Description: double the margin on any floating element, for example: If the margin set by the element is margin-left:15px, it will appear as margin-left:30px in the browser.

Workaround: Set the Display property of the element to inline, because the element is floating, so setting does not affect how the element is displayed in the browser.

9.3 pixel problem

problem appears in the browser: IE6 and its lower version

problem Description: There are 3 pixel gaps between the two adjacent Div, one Div uses float, and the other is not used.

Workaround: A. Float is also used for another div;

B. Add the property margin-right:–3pxto the floating div, but it will not be normal in other browsers, so we need to add IE6 hack and underline the attribute margin-right before Margin-right:–3px. (IE6 and earlier versions of Hack, which are preceded by an underscore _)

IE6 does not support min-*

problem appears in the browser: IE6 and its lower version

Problem Description: IE6 does not support min-height this property. Even if the element height is defined, if the content exceeds the height of the element, the IE6 automatically lengthens the height of the element when parsing.

Workaround: use IE6 to not recognize !important, set a fixed height for the element, and set the element height automatically.

Height:auto!important;height:300px;min-height:300px;

Because IE6 does not recognize !important, it recognizes height:300px, which automatically lengthens the height when the content exceeds 300px.

IE7 and other browsers recognize !important, although height:300pxis defined, but !important has the highest priority. So when the content exceeds 300px, it will be extended automatically.

IE6 does not support png-24 transparent images

problem appears in the browser: IE6 and its lower version

problem Description: in IE6, use png-24 transparent picture, opaque.

Workaround: the picture uses GIF format or png-8 format picture.

IE6 cannot define containers of around 1px width

problem appears in the browser: IE6

Problem Description: Create a container with a height of 1px, no effect in IE6.

Workaround: because the row height line-height has a default value under IE6, set ling-height:1px | Overflow:hidden | zoom:0.08.

Ie5~8 does not support opacity

problem appears in the browser: IE8 and its lower version

Problem Description: Ie5~8 does not support CSS properties opacity

Workaround: You can add an additional IE filter Alpha, as follows:

/* For ie5~7 */  / *forIE8* /

Firefox Click the dotted box that appears on the link

problem appears in the browser: Firefox browser

Problem Description: When you click on a link, the Firefox browser automatically adds a dashed border around the element.

Workaround: in order to be consistent with other browsers, we need to remove the dashed box, we can set the outline property to the A tag, as follows:

{outline: none;} {outline: none;}   

15. Margin Overlay

problems appearing in browsers: all browsers

problem Description: when two or more vertical margins meet, they will form an outer margin with a height equal to the larger of two of the height of the margin where the overlay occurs.

Workaround: This is not a browser bug, this is a feature of CSS, if you want to prevent this situation, and padding use. (to be solved according to the actual situation, here is just a brief description ha ~ ~ ~)

16. Picture default Spacing

issue with Browser: This issue is present in mainstream browsers

problem Description: when several img tags are arranged, the browser will have the default spacing.

Workaround: Add the property float to the IMG tag.

17. Clear Floating

If there are floating elements in the container, the height of the container does not automatically extend to the height of the content, causing the content to overflow outside the container and affect the layout of the page, in order to avoid this situation, we need to use CSS to clear the floating element.

There are three common methods:

A. Adding an empty element with a clear property after a floating element

<Div>  <Divstyle= "Float:left;">Left</Div>  <Divstyle= "float:right;">Right</Div>  <Divstyle= "Clear:both;"></Div></Div>

    B. Add Properties Overflow:hidden or Overflow:auto to the container, and haslayout in IE6, so you need to add zoom:1.

 <  div  style  = "overflow:auto;*zoom:1;"   >  <  div  style  = "float:left;"  >  left</ div   >  <  div  style  = "float:right;"  >  right</ div  >  

</ Div >

C. Using: After pseudo-elements

<style>. Clearfix{*zoom:1;}. Clearfix:after{content: ".";Display:Block;Height:0;Visibility:Hidden;Clear:both;}</style><Divclass= "Clearfix">  <Divstyle= "Float:left;">Left</Div>  <Divstyle= "float:right;">Right</Div></Div>

RELATED links: CSS box models (box model)

Browser compatibility issues that we often encounter in those years