DIV CSS layout compatibility issue_html/css_WEB-ITnose

After learning div css layout, there will always be a problem that cross-browser test pages are too different. After learning this chapter, I know the source of the difference.

The parsing results of some css attributes will be different in different browsers. This is because the developers of individual browsers do not design the parsing of some css attributes according to w3c standards. There are many browsers that can be used. , but usually when debugging the page layout, it can be divided into two categories: IE and non-IE. The main reason is that Microsoft's IE browser is not designed according to W3C standards. Almost all non-IE browsers comply with W3C standards. In addition, what is even more annoying is that there are many versions of IE (IE5, IE6, IE7, IE8, etc.), there are also many differences in the parsing of css. At present, IE5 is suitable for so few people that you don’t need to consider it. Generally, the compatibility of IE browsers is only for IE6, IE7, and IE8. Each new version of IE is moving towards standardization, and non-IE browsers are not compatible with it. The best browser to try is Firefox.

The box model is an important concept in CSS. The scope of the standard w3c box model includes margin, border, padding, and content area. And the content area does not include other parts, but the IE box model also includes margin, border, padding, and content area. But unlike the W3C box model, the content area of ​​the IE box model includes border and padding. This is the main reason why IE browser is incompatible with other browsers

From this point of view, as long as IE browser is parsed according to the standard W3C specification, this problem can be solved. So we need to add a DOCTYPE statement at the top of the web page. DOCTYPE defines the basic type of the current document and is used to tell the browser what rules should be followed when opening a web page. To build a web page that meets standards, the DOCTYPE declaration is an essential component. The declaration method is as follows

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

can also be used The latest simple DOCTYPE declaration method, the code is as follows

Although DOCTYPE solves most of the problems, there are still some incompatible tags and styles, and some Developers need to debug carefully