怎么解决浏览器兼容性问题
怎么解决浏览器兼容性问题
所有浏览器 通用 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 可以
