浏览器兼容——IE和Chrome、firefox等浏览器的共同问题

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 的单元格间隙 (cellspacing 属性或 '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等

 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注