最多做兼容是在 12,13 年的时候了,负责的网站需要兼容到 IE6,遇到了很多 bug。把 W3C 的一个关于 IE 的 hack 的网站从头看到尾,现在却连网站的名字都想不起来了。还真是需要写笔记留存下来。
最近又在做兼容的项目,就开始找笔记,几天前看到自己写的一篇笔记,整理了一下发到网上。方便记录,也方便有用到的时候随时查看。
浏览器兼容——IE6 IE7 IE81. 在 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 问题
- .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 无法设置滚动条颜色了?
解决办法是将 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 元素。
浏览器兼容——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. 怎样使一个层垂直居中于浏览器中?
div {position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;border:1px solid red;}
这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二。
14. 图片下方出现几像素的空白间隙
这个也有多种解决方案,如将 img 定义为 display:block,或定义父容器为 font-size:0,个人更推荐使用 vertical-align 的方式,它的值可以是 text-top | text-bottom | middle 等
这三个链接是我在自己空间上分开写的三篇文章。
http://www.huangyuhong.com/2017/07 / 浏览器兼容 - ie6-ie7-ie8/来源: http://www.w3cfuns.com/notes/12048/ba653ca2bffd30577992f27e3ab13382.html