怎么解决浏览器兼容性问题

 

怎么解决浏览器兼容性问题

所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px; IE6 专用 *height: 100px;
IE7 专用 * height: 100px; IE7、
FF 共用 height: 100px !important;

1.内外边距被统一:

不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。
因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码:
*{margin:0px;padding:0px;}
借于此,所有标记的内外边距被统一起来。

2.margin不一致的问题:

当有多张图片需要排在一行时,我们通常使用“Float:Left”来实现,这样一来,浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display:inline”项即可。

3.div居中问题:

通常我们会利用“vertical-align:middle”来实现,这对于搜狗浏览器来说,是正常的,但是对于IE浏览器来说,却并没有效果。对此,一种较好的解决方法是:将文字的行高height-line:设置与div一样时即可解决问题。

4.important!:

FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 如width:115px !important;width:120px;padding:5px;必须注意的是, !important; 一定要在前面。

5.给a标签内内容加上样式:

若需给a标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

6.FF 和 IE 对 box 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.

7.ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

8.外部 wrapper :

作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应

7.手形光标:

关于手形光标. cursor: pointer.

8.IE6hover的链接:

在IE6和IE7下,躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一

些定义了:hover的链接,当鼠标移到那些链接上时,在IE6下就会触发躲猫猫。

解决方法很简单:

1.在(那个未浮动的)内容之后添加一个<span style="clear: both;"> </span>

2.触发包含了这些链接的容器的hasLayout,一个简单的方法就是给其定义height:1%;

9.IE下z-index的bug

在IE浏览器中,定位元素的z-index层级是相对于各自的父级容器,所以会导致z-index出现错误的表现。解决方法是给

其父级元素定义z-index,有些情况下还需要定义position:relative。

10.: Overflow Bug

在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;

11.怎么解决IE6双倍边距问题display:inline

解决办法:当将其display属性设置为inline时问题就都解决了。

总结:这个现象仅当块级对象设置了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。

方法二:,!important解决,比如

margin-left:10px !important;;

_margin-left:5px;

 

12. css实现透明滤镜

filter:alpha(opacity=12); 支持 IE 浏览器

-moz-opacity:0.12; 支持 FireFox 浏览器

opacity:0.12; 支持 Opera,safari 等浏览器

ps:现在困扰我的就是,背景是实现了透明效果,可是这个层里面的所有元素:CSS实现背景透明效果这几个字也跟着透明了.这个以后我还得努力寻求解决办法,有待解决!

13.如何对齐文本与文本输入框

 

加上 vertical-align:middle;

<style type="text/css">

<!–

input {

     width:200px;

     height:30px;

     border:1px solid red;

     vertical-align:middle;

}

–>

</style>

 

14.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

 

15.怎么样才能让层显示在FLASH之上呢

 

解决的办法是给FLASH设置透明

<param name="wmode" value="transparent" />\

15. 游标手指cursor   

cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

更多专业前端知识,请上
【猿2048】www.mk2048.com

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

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