为什么浏览器会存在兼容问题?
同一浏览器,版本越老,存在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图片