DOCTYPE of the specified Web page to resolve the CSS hacking method summary

Source: Internet
Author: User
As we all know, to be a WD (Web Designer), we first have to wait for several browsers: Ie6,ie7,firefox. The General page, all only requires the normal work under the Ie6,ie7,firefox the line.

But in fact, the browser far more than these, Firefox is divided into 3 major versions of Firefox 1.5,firefox 2,firefox, Ie7,ie6 also have several series, in addition to these two mainstream manufacturers of products, there are opera, Konqueror,netscape,chrome and other series.

These browsers, each with a set, often run here normally, where it is not normal to run. WD then demolished the east to the west, and finally can be normal under a few browsers. As a result, the product manager has a new need, where it needs to be changed, and then, finally, the good paper shelves collapsed, WD was too busy. That's what I say, because it's my experience.

As always, WD collects a bunch of CSS Hacking tricks that are normal in every browser. Online a search, a lot of.

However, first WD did not figure out a basic question, why do we need CSS Hacking? If there are 1000 browsers, do we have to remember 1000 kinds of browser hack tricks?

In fact, Css hacking is, in a way, a thing that does not take the stage. Css hacking has a lot of tricks, purely to take advantage of the browser's bug. For example, the common use of _class{...} to differentiate IE and Firefox, supposedly _class is an illegal marking method. The advent of CSS hacking, WD is the last resort, WD's daily work is not crazy CSS Hack.

In fact, so many browsers, it is not possible to casually, want to define what you define a tag. People are used to living in a standard world, and there are a number of standards in the Web world. Browsers are also struggling to achieve web standards compatibility. However, some browsers debut early, it can be said that the subsequent emergence of the web standards are under the influence of their birth. There is another, that year very cow B, so did a lot of innovation, did not put the web standards in mind, pretty don't care. Moreover, the standard itself is constantly updated. Therefore, the General browser product system has had a period of no less care about the Web Standard days, and then we all realize that we have to compromise, we have to formulate a set of standards, we all abide by. But before each family have their own set of some small box, they do not meet the standard, how to do?

So, these people think of a way: Standard mode and weird mode. There is another one, called "near-standard mode", almost standards. It's weird enough to say that I'm dizzy. Don't worry, listen to me slowly.

Not to say, these bosses sit together, set a variety of standards, and everyone in the future according to this set of standards to explain the page. If you make a Web page that can be interpreted according to this set of criteria, then use a tag doctype to indicate that it can be interpreted as a Web standard. This is the standard mode.

That before each home has been produced, the provisions of the small 99 do not meet the standard, how to do ah? You can't just throw them all away, right? There is probably such a set of principles on the software, called backwards compatibility. In weird mode, each browser simulates the operation of those older browsers to prevent the old page from working. When the page does not specify DOCTYPE, the browser generally works in odd mode, in case the old page does not work.

For the difference between the two modes, the most notable example relates to the IE proprietary box model on Windows. When IE 6 appears, use the correct box model in standard mode and use the old-fashioned proprietary box model in the quirks mode. To maintain backward compatibility with IE 5 and earlier versions, Opera 7 and later also use the flawed IE box model in quirks mode.

Mozilla and Safari also have a third model, called the "almost standard mode (almost standards modes)", which is the same as the standard mode, except for some subtle differences in the way tables are processed.

It is for this reason that you can throw away a lot of CSS hacking tricks. Some books say that IE6 and Firefox box models (or some place called box models) are inconsistent, so you need to do this hack:

p{
width:100px;
*width:95px;
}

I say this kind of book is really fraught. Because, as long as the correct designation of DOCTYPE, these browser interpretation of the differences will not exist, we follow the standard to do.

This pattern refers to the DOCTYPE domain specified at the beginning of the HTML file. There are several common ones:

HTML 4.01 Transitional:

Copy the Code code as follows:


<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >



HTML 4.01 Frameset

Copy the Code code as follows:


<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "HTTP://WWW.W3.ORG/TR/HTML4/FRAMESET.DTD" >



XHTML 1.0 Strict

Copy the Code code as follows:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >



XHTML 1.0 Transitional

Copy the Code code as follows:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">



XHTML 1.0 Frameset

Copy the Code code as follows:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >


XHTML 1.1

Copy the Code code as follows:


<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.