浏览器兼容总结

Posted 2021-04-30 前端成神宝典

最多做兼容是在12，13年的时候了，负责的网站需要兼容到IE6，遇到了很多bug。把W3C的一个关于IE的hack的网站从头看到尾，现在却连网站的名字都想不起来了。还真是需要写笔记留存下来。
最近又在做兼容的项目，就开始找笔记，几天前看到自己写的一篇笔记，整理了一下发到网上。方便记录，也方便有用到的时候随时查看。

浏览器兼容——IE6 IE7 IE8

1.  在 IE6 IE7 IE8(Q)中，若 TD 元素没有明确设定 ‘white-space’ 特性，其值为继承自其父元素的值，则其内的子元素不再能够自动继承 TD 的 ‘white-space’ 特性。并且若 TD 元素明确设定了 ‘width’ 特性，则 TD 元素本身的 ‘white-space’ 特性自动变为了初始值 ‘normal’。

明确地为 TD 的子元素设置 ‘white-space’ 特性，避免使 TD 元素自动继承父元素的 ‘white-space’ 特性。或者避免同时为 TD 元素设置宽度及 white-space:nowrap（或是 nowrap 属性）。

2.  IE6 IE7 IE8(Q) 中 cellspacing 属性在重合的边框模型的表格中仍然有效。

在 IE6 IE7 IE8(Q) 中，在通过 border-collapse:collapse 使用表格的重合边框模型后，其 cellspacing 属性仍然有效；在其他浏览器 中，此时的 cellspacing 属性不再生效。
在使用 border-collapse:collapse 时应保证 TABLE 元素的 cellspacing 属性值为 0。

3.  IE 混杂模式(Q) 中给 IMG 元素设置 ‘padding’ 特性无效。

使用标准模式。
在 IE6(Q) IE7(Q) IE8(Q) 中如需为 IMG 元素设置 ‘padding’ 特性，需要在 IMG 元素外加一层容器标签，为该标签设置 ‘padding’。

4.  IE6 IE7 IE8(Q) 中可被渲染的绝对和固定定位元素将消除其后紧邻它的触发了 hasLayout 特性的块级元素的 margin-top

针对这类低版本 IE 浏览器的 bug，请尽量避免满足其所有触发条件。如本例中所需间隙可以采用其它设置元素的 margin-bottom或问题元素的 padding-top 等方式来弥补。

5.  在 IE6 IE7 IE8(Q) 中实现块元素的 ‘display:inline-block’ 特性值支持

尽量仅使用所有浏览器都支持的 ‘display’ 特性值：’inline’、’block’、’list-item’、’none’。
在 IE6 IE7 IE8(Q) 中实现块元素的 ‘display:inline-block’ 特性值支持，需要先将块元素设置为行内元素，并设置可以在 IE6 IE7 IE8(Q) 内触发 haslayout 特性的专有特性 ‘zoom:1’。行内元素实现 ‘display:inline-block’ 特性值支持只需直接设置此特性值或同样使用 ‘zoom:1’ 即可。
IE6/7下解决inline-block问题

• css 代码

• 1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  .k2-inline-block{
  display:-moz-inline-stack;
  display:inline-block;
  *display:inline;
  *zoom:1;
  vertical-align:middle;
  position:relative;/* 解决因为父容器{display:inline;}问题导致Firefox中li里面的链接不可点的bug */
  _position:static;/* 解决因为IE6中因为上一行代码带来在{position:relative}容器中移位在bug */
  }

6.  为什么web标准中IE无法设置滚动条颜色了？

<style type=”text/css”>body { scrollbar-face-color：#f6f6f6; scrollbar-highlight-color：#fff; scrollbar-shadow-color：#eeeeee; scrollbar-3dlight-color：#eeeeee; scrollbar-arrow-color：#000; scrollbar-track-color：#fff; scrollbar-darkshadow-color：#fff; }</style>
解决办法是将body换成html

7.  ‘margin-left’、’margin-right’ 特性指定的值会应用于其相应方向的 padding 上

IE6 IE7 IE8(Q) 中，若一个触发了 hasLayout 的元素其内第一个非空白节点 (即 children[0]) 为 TEXTAREA 元素 或者 type 属性值为 text、password、submit、reset、button、file 的 INPUT 元素，并且这个元素设定了 ‘margin-left’、’margin-right’ 特性，则 ‘margin-left’、’margin-right’ 特性指定的值会应用于其相应方向的 padding 上。

在 INPUT、TEXTAREA 元素之前放一个触发了 hasLayout 的空 SPAN 元素。
<span style=”zoom:1;”></span>


浏览器兼容——IE6

1.  当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。 在IE 6内子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。

解决这个bug很简单，在父元素中使用position:relative;即可解决该bug

2.  双边距bug，用到float属性，同时使用margin属性时，在ie6下产生双倍行距

用display:inline;修正

3.  ie6下的position问题，出现问题的时候，

一定要记得检查父级元素position:relative;的z-index层级，要设置高点。

4.  图片透明

IE6 浏览器在处理带有半透明通道的PNG24格式图片时，错误的将半透明通道渲染成灰色。PNG8 格式图片背景透明。


浏览器兼容——共同问题

1.   在li里插入浮动元素产生的3px的bug

给li添加float属性，属性值可以是除none外的任意值
给li添加vertical-align属性，属性值可以是任意值

2.    li元素里要用span元素将时间设置为右浮动时IE6浏览器会跑到下一行

把span标签写到li里的最前面

3.    select下拉列表居于顶层的问题，

可以用iframe修正，大致的操作是用iframe压住select.

4.    解决chorme最小显示12px的bug

html{ -webkit-text-size-adjust:none }

5.    换行

强制不换行
div{ white-space:nowrap; word-break:keep-all;}
自动换行
div{ word-wrap: break-word; word-break: normal; }
强制英文单词断行
div{ word-break:break-all; }

6.    在表格算法中，在固定布局（table-layout:fixed）情况下可能出现单元格的内容因宽度不够溢出单元格的情况。

为单元格元素设置 “overflow:hidden” ，在所有浏览器中均会裁切溢出单元格的内容。

7.    由于 TABLE 元素的 align 属性已经被 W3C 废弃，所以在考虑 TABLE 元素对齐问题上应避免使用 align 属性，而改用 CSS。

使用CSS的 float:left 代替 align=”left”；
使用CSS的 float:right 代替 align=”right”；
使用CSS的 margin-left:auto 及 margin-right:auto 代替 align=”center”。

8.    各浏览器中IFRAME 元素的 scrolling属性与其子页面 HTML 与 BODY 元素 ‘overflow’ 特性的制约关系有差异.

W3C 规范并没有说明 scrolling 属性应该控制子页面哪个元素的滚动条的生成或者 ‘overflow’ 特性，为防止在某些情况下 Chrome Safari 的 IFRAME 子页面中出现多余滚动条，应避免为 HTML 或者 BODY 元素设置 overflow:scroll。

9.    若有页面需要其他元素遮挡 Flash

1.使用 EMBED 引入Flash 。
2.wmode的值使用 ‘transparent’ 或 ‘opaque’ 。
3.使用的 iframe 需要设置背景色(设置为白色)。

10.    CSS 规范并没有明确说明单元格间隙的作用位置以及行组元素对其的影响

为了避免差异应避免在包含 THEAD、TBODY、TFOOT 这类行组元素的表格内设定非 0 的单元格间隙 (cellsping 属性或 ‘border-spacing’ 特性)。

11.    浮动元素的宽度值

1. 明确为浮动元素设置一个宽度值，避免其在进行 “shrink-to-fit” 计算时在不同浏览器之间出现的宽度计算差异。
2. 若浮动元素出于某些情况必须使用 “shrink-to-fit” 宽度时，则应尽量保证其内子元素的宽度不依赖其自身宽度，如使用 px 为单位的宽度值。

12.    为什么FF下文本无法撑开容器的高度height？

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
div { height:auto!important; height:200px; min-height:200px; }

13.    怎样使一个层垂直居中于浏览器中？

<style type=”text/css”>
div {position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;border:1px solid red;}
</style>
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二。

14.    图片下方出现几像素的空白间隙

这个也有多种解决方案，如将img定义为display:block，或定义父容器为font-size:0，个人更推荐使用vertical-align的方式，它的值可以是text-top | text-bottom | middle等