浏览器兼容性汇总

1.在做软件工程教育改革网站(负责修改)的时候，遇到了几个浏览器的问题：
 页面在360浏览器里可以正常显示，在IE和Firefox里无法出现滚动条，致使页面显示不完整。
学到的东西：
①从浏览器来说，在做页面的时候可以以Firefox为准，通常来说，在Firefox里面可以正常显示，在其他页面里面也可以正常显示。
②在Firefox里面添加了一个新的插件Firefox Bug，该插件可以用于在显示页面时同时在浏览器里查看相应部分的代码。
③通常，兼容性问题都依照三个主流浏览器，分别为：IE6.0，Firefox，Google。
④在CSS样式表中，尽量少采用诸如“*”，“！important”等来解决兼容性问题。其实，通常的兼容性问题都是由代码引起的，通过修改代码就可以解决兼容性问题。
⑤想要使页面在浏览器中居中显示，可以在body属性中写上：margin：0 auto；就可以了。
⑥关于在样式表中的布局问题和选择器的命名问题，可以参照如下格式：
<div  id="main">
<div  id="top">
在该部分可以添加诸如banner等内容
</div>
<div  id="content">
在该部分可以添加网页的具体内容，同时也可以添加其他的div 标签
</div>
<div  id="foot">
在该部分可以添加诸如网页的版权等
</div>
</div>
⑦在网页设计中，可以添加适量的解释语句，以方便以后页面的修改。⑧在一开始设计网页的框架时，可以为每个区域添加边框，同时用鲜艳的颜色注明，以确保自己所做的框架符合自己的要求，可以使用：boder: solid  1px  red;在页面框架确定后，可以直接将1px改为0px就将边框消除了。
⑨关于overflow属性：
当某个元素有一定的宽度但它的一个字元素更宽时，将会得到一个页边距为负值。而实际上，页边距是可以为负值的。但这样的结果通常是子元素会伸出到父元素以外，通常在右边。
而CSS解决这类问题的办法有：
⑴简单的截断伸出的部分并不予显示。
⑵显示一个滚动条（或其他具有类型功能的事物）以便用户能够向一边移动子元素。
⑶初始情况：允许元素子元素伸出。
此时就可以使用overflow属性，该属性有四个属性值：visible（此子元素可以伸出），hidden（伸出部分不可见），scroll（使用滚动条或某种类似的机制出现，滚动条始终存在），auto（使用滚动条或某种类似的机制出现，只有当需要滚动的时候才会出现滚动条）。  
⑩尽量的减少代码，特别是在CSS里面。可以将代码合在一起就尽量将代码合在一起。 
除解决问题之外学到的东西：
①在布局中尽量不用table布局，尤其是利用table在做边框时，若设置了每个单元格的大小，在后来对页面进行修改时会遇到很多问题。②在用div布局时，若不设置每个块的width和height，那么页面就可以根据内容来扩展，从而解决table所造成的宽度和高度的限制问题。
③iframe标签：代表HTML内联框架
* iframe标签是成对出现的,以<iframe>开始,</iframe>结束 　　

* 属性 　
src -- 浮动框架的文件路径，语法为：
<iframe src="file_name">
name -- 定义了浮动框架的名称，语法为：
<iframe src="file_name" name="frame_name">
frameborder -- 指定是否显示浮动框架的边框，语法为：
<iframe src="file_name" frameborder="value">
value有以下2个取值：
yes：显示框架边框
no：隐藏框架边框
marginwidth -- 定义了框架中HTML文件显示的左右边界的宽度,取值为px,缺省值由浏览器决定，语法为：
<iframe src="file_name"  marginwidth="value"> 　　
marginheight -- 定义了框架中HTML文件显示的上下边界的宽度,取值为px,缺省值由浏览器决定，语法为：
<iframe src="file_name"  marginheight="value">　
align -- 设置浮动框架的对齐方式，语法为：
<iframe src="file_name" align="left/center/right"> 　　
height -- 设置浮动框架的高度 　　
width -- 设置浮动框架的宽度 
scrolling -- 设置浮动框架滚动条的显示方式，语法为：
<iframe src="file_name" scrolling="value">
value有以下3个取值：
yes：显示滚动条
no：不显示滚动条
auto：根据窗口内容决定是否有滚动条

2.唐家河网站，在制作首页时遇到的问题：
①在IE8.0和FireFox以及Google里面是正常显示的，但是在360里面却出现部分错位的问题。
②根据原来的兼容经验，使用*和+去兼容IE8.0，在这次的项目中IE8.0浏览器却不再识别*和+。但是360却可以通过该方法来进行兼容。
学到的东西：
①在1—3的布局中，原来我使用的是：
左边那块固定不动，中间那块相对于左边那块浮动，右边那块相对于中间那块进行浮动。但是出现了问题，在IE和FireFox上面均出现问题（写了兼容性代码），中间模块和右边模块都发生了错位，不是往上面移动了，就是往下面移动了。
改进的方法：
左边那块向左浮动，右边那块向右浮动，中间那块不浮动，只需对中间那块进行一些左右边距的设置。此时，就算不写兼容性代码，在IE、FireFox、Google、Opera里面都是正常显示。
注意：在使用了float之后，最好不要对margin设置负值。
②*和+可以用于兼容360。
③一种兼容IE的新方法：
<!--[if  lte  IE6]>
<style  type="text/css">
.........
</style>
<![endif]-->
注意：
⑴该段兼容性代码只有写在.html页面里面才有效。
⑵其中的lte还可以换成：
gt：高于某一版本
gte：高于或等于某一版本
 lt：低于某一版本
 lte：低于或等于某一版本
 ！：不等于某一版本
④各种目录的表示：
/：表示从根目录下开始查询
./：表示从当前目录下开始查询
../：表示从当前目录的上一级目录开始查询
注意：凡是加../，都表示上一级的上一级
⑤在为客户做网页时，要全面满足客户的需求，即使有时候自己并不认同客户的想法，但是仍然要先按照客户的想法去做，最后在通过交流来进行修改。

3.校友网，所遇到的问题：
①在制作子页面时，要使用iframe，但是对iframe并不了解。
学到的东西：
①实现iframe，例如：
第一个页面（U1）：
<a href="U2.html" target="hello">你好</a>

<iframe name="hello" id="df" width="400px"></iframe>
第二个页面：
dfdfdfdfdfdfdf

Erererettret

使用该语句即可以完成在单击右边的链接文字，左边出现浮动框。

转载于:https://www.cnblogs.com/lishuang/archive/2011/04/26/2029322.html