如何写出兼容性很好的页面

本文主要是介绍如何写出兼容性很好的页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

写出好的页面前首先你要把HTML4与HTML5学会了，然后CSS，CSS3也有一定的掌握。

通常情况下，不同类型的网站都去认认真真的排版后，对前端就有一定的掌握程度，对写静态页面问题就不大了。至于个数嘛，3个完整网站以上。

提醒：如果要写出非常好的页面，js是必不可少的，这对初学前端的人来说，就有点难度了，但也别胆怯，按照学习的先后进度来学习，先学HTML+CSS，再学习HTML5+CSS3，学到一定程序后，再去接触javascript，我相信就算是自学，HTML+CSS 2个月左右，javascript一个月，肯定是能学出来的。

如果上面的还不会，就去学习一下吧：HTML教程、HTML5教程、CSS教程、CSS3教程、javascript教程。

说多了，接下来说一下如果写出兼容性好的网页：

1.文档声明不可少:<!doctype>

其实这跟 WCAG 根本上连不上什么直接关系，但为了一个兼容性更好，特别是向后兼容的页面，必须要把这个东西写上：

<!doctype>

2.有兼容性标签的尽量不要用

学习的过程当中你就已经有些兼容性的了，如果要用，除飞你只想让该标签的效果只在某些浏览器里面有效果，特别是H5，现在好些标签都没有统一在所有浏览器有效。

3、写CSS之前一定要先清格式

清除标签格式是必须的，因为大部分标签都有兼容性，但又必须使用，例如ul标签在ie6,7下默认是有外边距的，在ie8,火狐，谷歌下默认有内边距。

4、常见浏览器bug要避免

例如：在嵌套div中，如果外层div没有设置边框，内层div的margin-top会无效，它会直接作用到外层DIV上（也就是外层div margin-top的效果了）

5、子元素浮动，父元素默认包不住子元素的情况

这种情况一般用如果方法处理：
1、给父元素加overflow:hidden; 但这种你要保证父元素以后没有可显示的元素，不然显示不了哦。

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.div2{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> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>

2、在最后一个浮动子元素的后面加一个清浮动的元素

<style type="text/css"> 
.div1{background:#000080;border:1px solid red} 
.div2{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> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
<div class="clearfloat"></div> 
</div> 
<div class="div2"> 
div2 
</div>

3、父级div定义伪类:after 和 zoom

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

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 4、父元素也浮动 5、父级div定义 overflow:auto 6、父级div定义 display:table

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.div2{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> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>