常见浏览器兼容问题及解决办法(部分)

一、不同浏览器解析元素默认的外边距和填充大小存在误差

• 方法：把当前页面的可视区域元素的边距和填充都默认初始化为0

二、元素height高度（通常小于10px）IE6以下会超出本身设置默认高度(19px)

• 方法：1、给超出元素设置overflow:hidden 2、font-size:0; （2px）

三、border元素边框 1像素点状线（dotted）在IE6以及以下解析为虚线

• 方法：使用photoshop制作点状线图片，使用背景图片属性

四、元素外边距传递 （ BFC / hasLayout）

• BFC：块级格式化范围决定元素如何对其内容定位和其他元素的关系进行可视化布局的时候，BFC提供了一个环境HTML元素可以在这环境中按照一定规则布局，类似浮动会触发BFC，浮动元素内部子元素主要受该浮动元素影响，两个浮动元素之间互不影响（独立容器，该容器的box布局与该容器没关系）正常文档流中，box框可作为格式化上下文，类型有block/inline
• 触发条件：float:不为none；overflow:不为visible
  
  • display:table-cell,table-caption,inline-block;其中任何一个position:不为relative和static
    

    BFC可以做什么？

• a、如果一个浮动元素后面跟着一个非浮动的元素，前者遮盖后者（不和浮动元素重叠）
• b、清楚元素内部浮动
• 父元素包含子元素，子元素浮动会脱离当前父元素区域使其高度失效
• **解决方法**overflow:hidden;但是相对IE6上需要配合zoom：1;使用，zoom：1，触发IE6特有的layot，layout是IE浏览器渲染引擎的一个内部组成部分控制元素其尺寸和定位

五、IE6，cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持

• 方法：设置两种cursor:pointer ; cursor:hand

六、IE6浏览器 - img图片下部高度多余5px

• 方法：将图片转化为块级对象，即display:block

七、li的间距问题 IE6浏览器 1、li标签设置宽高，且li里面的元素发生了浮动；

• 方法：1：li不设置宽高； 2：li内部的标签不进行浮动

八、子选择器在IE6中不能使用 IE6浏览器，使用E>F子选择器

• 方法：采用其他选择器或者采用后代选择器进行控制，
• 如：

div p{margin:10px;} 
div p p{margin:0;}

• 替代掉

div>p{margin:10px;}

九、透明rgba与opacity IE6不支持此两种透明的设置方法

• 方法：使用IE6当中的滤镜filter替代掉，
• 如：

opacity:0.6;
filter:alpha(opacity=60);

十、table标签当中border-color属性设置无效

• 方法：运用CSS样式进行控制，而不是使用属性进行样式的处理

十一、a标签hover不适用于所有标签 只支持a标签的使用

• 方法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；详情请查看日志：兼容IE6 a标签hover效果

十二、img外部的border img外部有a标签，即img标签有链接时

• 方法：设置img边框border:0

十三、横向双倍外边距 IE6中块元素浮动后，会出现横向双倍margin现象

• 方法：在float标签的样式控制中加入display：inline