常见浏览器兼容问题及解决方案

最新推荐文章于 2023-11-28 19:51:01 发布

原创最新推荐文章于 2023-11-28 19:51:01 发布 · 638 阅读

CC 4.0 BY-SA版权

1 篇文章

订阅专栏

本文列举并解决了十个常见的浏览器兼容问题，包括标签默认内外补丁差异、浮动元素margin问题、高度设置不一致、图片默认间距、min-height兼容、opacity不支持、定位与溢出、a标签样式顺序、边距重叠以及背景闪烁等。通过CSS调整和特定浏览器 hack 方法，为开发者提供了实用的解决方案。

在此只展示了十点

问题一：不同浏览器的标签默认内外补丁不同
问题：我们平时随便做测试，写几个标签，在不加样式的情况下，各自margin与padding的差异是很大的
解决:在css里，给全局加

*{
	margin:0;
	padding:0;
}

问题二：块属性标签设置float后，同时又有水平margin时，在IE6显示margin比设置的大导致最后一块元素被挤掉
解决：可以将块级元素display设置为inline。
问题三：在IE6，IE7等浏览器，标签高度小于10px时，实际的高度会超出设置的高度，这是因为浏览器给标签设置了一个默认的最小高度；
解决：给超出的高度标签设置overflow:hidden,或者呢，或者设置行高line-height小于你设置的高度
问题四：某些特殊浏览器内，图片会有默认的间距(几个img标签放一起)
解决:使用float为img布局，因为所有标签设置float之后都会变成块级元素，块级元素浮动时会紧挨在一起，没有边距；此外可以让HTML的img标签紧挨在一起，不要隔开，但是会影响HTML文档的结构，不太美观。
问题五：标签的最小高度设置min-height不兼容的问题（因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容）
解决：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

问题六：IE9以下浏览器不能使用opacity；
解决：

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

问题七：两个块级元素，父元素设置了overflow:auto，子元素设置了position:relative ，且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决：父级元素设置position:relative。
问题八：a 标签的几种 CSS 状态的顺序
解决：我们经常在写 a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。
正确的a标签顺序应该是：love hate
link:平常的状态
visited:被访问过之后
hover:鼠标放到链接上的时候
active:链接被按下的时候
问题九：BFC 解决边距重叠问题
解决：当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：overflow: hidden;
```
<div class="box" id="box">
  <p>fbfdbfbbfbd fbdbd</p>

  <div style="overflow: hidden;">
    <p>fbbbbb  fbdbhdthett</p>
  </div>

  <p>fbndfjkhdk fblgbf ncbkjfng</p>
</div>
```
问题十：背景闪烁的问题（链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载）
解决：可以用 JavaScript 设置 ie6 缓存这些图片：
```
document.execCommand("BackgroundImageCache", false, true);
```