为什么浏览器会存在兼容问题？
同一浏览器，版本越老，存在bug越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。
不同浏览器，核心技术不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
解决方案：CSS里 *{margin:0;padding:0;}
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
解决方案：在display:block;后面加入display:inline;display:table;
浏览器兼容问题五：图片默认有间距
解决方案：使用float属性为img布局
浏览器兼容问题七：透明度的兼容CSS设置
问题症状：IE6,7,8不支持rgba与opacity两种透明的设置方法；
解决方案：使用IE6当中的滤镜filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。
浏览器兼容问题八：img外部的border
解决方案：设置img边框border:0;
浏览器兼容问题九：子选择器在IE6中不能使用
解决方案：采用其他选择器或者后代选择器进行控制。
浏览器兼容问题十：input聚焦框颜色与样式不同
解决方案：使用outline：none，清除默认样式之后再统一设置。
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link vis8ited hover active
4.IEz-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
10. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片
网友评论