浏览器兼容性问题解决

<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 post-container">
<h2 id="浏览器兼容性问题解决">浏览器兼容性问题解决</h2>
<p>由于使用的浏览器有多种多样，这就导致了CSS在不同浏览器中出现不同的问题，特别是在IE6及以下版本中出现的兼容性问题，这就需要我们掌握CSS兼容性知识。</p>
<h4 id="1使用声明">1、使用声明</h4>
<p>在写HTML代码时，声明是首先要放在前面的，漏写声明将会导致很多问题产生。DTD声明在IE浏览器中会出现一些怪异的模式，所以我们为保证代码在IE浏览器正常运行，记得写DTD声明。</p>
<h4 id="2ie6下的双边距问题">2、IE6下的双边距问题</h4>
<p>我们知道外边距margin上下可以合并，但左右不合并。但是在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，这个时候margin值会加倍。比如：</p>
<div class="highlighter-rouge">
  <div class="highlight">
<pre class="highlight"><code><style>
.div1{width:100px;height: 100px;border: 1px solid #ccc;background: green;float: left;margin-left: 30px;}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</code></pre>
  </div>
</div>
<p>在IE6下，元素会离左侧的距离为60px，所以在IE6下浮动的元素，并且有margin-left或margin-right的元素会产生双边距问题。解决的办法就是：对元素设置display:inline属性</p>
<h4 id="3行内元素的上下margin和padding不拉开间距的问题">3、行内元素的上下margin和padding不拉开间距的问题</h4>
<p>当对行内元素设置上下margin或padding时，并不拉开间距，可能会与块级元素重合在一起。比如说：</p>
<div>
  块级元素
</div>
行内元素
<p>行内元素与会计元素重合在一起了，针对这种情况，我们将行内元素变为行内块元素即可 span{background:green;padding:30px;margin:20px;display: inline-block;}</p>
<h4 id="4ie对png图片或gif图片透明度的支持">4、IE对png图片或gif图片透明度的支持</h4>
<p>在IE6下，浏览器对png的透明度支持并不好。本该是透明的地方，在IE6下会显示为浅蓝色。可以使用IE下私有的滤镜功能来解决问题，格式如下：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png图片路径’,sizingMethod=’crop’)。运用时直接复制。</p>
<h4 id="5ie6下3pxbug">5、IE6下3pxBUG</h4>
<p>在IE6下，两个相邻的div，如果一个div浮动了，另一个div没有浮动，那么两个div之间就会出现一个3px的间隙解决办法：a、.对另一个元素同时使用float； b.、为已经浮动的div添加一条语句：margin-right:-3px; ；</p>
<h4 id="6ie6下文字溢出bug">6、IE6下文字溢出BUG</h4>
<p>在IE6下，子元素的宽度和父级的宽度相差小于3个像素的情况下，而且两个div之间有注释或者有内联元素时。内嵌越多，溢出越多。解决办法：1、直接用<div></div>把注释或内嵌包起来。 2、或者把父级调大一点，超出3像素</p>
<h4 id="7ie6下绝对定位bug">7、IE6下绝对定位BUG</h4>
<p>当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失掉。解决办法：给定位元素包个div</p>
<h4 id="8ie下的躲猫猫bug">8、IE下的“躲猫猫”BUG</h4>
<p>这个BUG是这样产生的：一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，（内容出现在浮动元素旁边，然后内容后面是一个清理元素）所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有重新刷新才出现。也可以在div#clear下面放置很长很长的内容，也就是使浏览器出现滚动条，你向下拖动滚动条再拖回来，它一样也出现了</p>
<p>解决办法： 1、去掉父元素上的背景颜色或图像</p>
<p>2、避免清理元素与浮动元素接触，如果容器元素应用了特定的尺寸，那么这个bug也不会出现</p>
<p>3、给容器指定行高，这个bug也不会出现</p>
<p>4、将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。</p>
<h4 id="9定位中的兼容性问题">9、定位中的兼容性问题</h4>
<p>1、在IE6，7下子元素有相对定位的话，父级的overflow就包不住子元素。</p>
<p>解决办法：给父级也加相对定位</p>
<p>2、在IE6下，绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom的值会有1px的偏差。也就发生定位元素盖不住父级的边框，无解决办法</p>
<p>3、固定定位在IE6下不支持，可以用JS解决</p>
<h4 id="10表单表格中的兼容性问题">10、表单表格中的兼容