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

所有浏览器通用 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解决) 如115px !important;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;

<!--

input {

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设置透明

15. 游标手指cursor

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