An experienced driver teaches you how to write a page with good compatibility

Before writing a page with good compatibility, you must first learn HTML and HTML5, and then have a certain grasp of CSS and CSS3.

Normally, after different types of websites have been typesetting seriously, they will have a certain degree of mastery of the front end, and writing static pages will not be a big problem. As for the number, it’s more than 3 complete websites.

Reminder: If you want to write a page with very good compatibility, js is essential. This is a bit difficult for beginners to learn the front-end, but don’t be timid. , learn according to the learning progress, first learn HTML+CSS, then learn HTML5+CSS3, after learning a certain program, then learn javascript, even if it is self-study, HTML+CSS will take about 2 months, and javascript will take one month. It can be learned.

If you still don’t know how to do the above, go and learn it: HTML video tutorial, HTML5 tutorial, CSS video tutorial, CSS3 video tutorial, javascript video tutorial.

I’ve said too much, let’s talk about how to write a web page with good compatibility:

1. Document declaration is indispensable:

Actually, this has no direct relationship with WCAG at all, but for a page with better compatibility, especially backward compatibility, this thing must be written:

2. Try not to use

if there is a compatibility label. During the learning process, you will already have some compatibility. If you want Use it, except that you only want the effect of this tag to be effective in certain browsers, especially H5. Now many tags are not uniformly valid in all browsers.

3. Be sure to clear the format before writing CSS

Clearing the tag format is necessary because most tags are compatible but must be used, for example The ul tag has outer margins by default under IE6 and 7, and has inner margins by default under IE8, Firefox, and Google.

4. Common browser bugs should be avoided

For example: in nested p, if the outer p does not have a border, the margin-top of the inner p will Invalid, it will directly act on the outer DIV (that is, the effect of the outer p margin-top)

5. The child element is floating and the parent element cannot wrap the child element by default

This situation is generally handled with the if method:

1. Add overflow: hidden; to the parent element; but in this case you have to ensure that the parent element will not be available in the future. The element to be displayed, otherwise it will not be displayed.

<style type="text/css">
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.p2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
</p>
<p class="p2">
p2 
</p>

2. Add a clear floating element after the last floating child element

<style type="text/css">
.p1{background:#000080;border:1px solid red}
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
<p class="clearfloat"></p>
</p>
<p class="p2">
p2 
</p>

3. The parent p defines pseudo-classes: after and zoom

/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1}

Principle : After is only supported by IE8 and above and non-IE browsers. The principle is somewhat similar to method 2. zoom (IE converted with attributes) can solve the floating problem of ie6 and ie7

4. The parent element also floats 5. Parent level p defines overflow:auto 6. Parent p defines display:table

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;ba