css浏览器兼容问题(在IETester及其他浏览器中亲试过)

标签：

最近在研究一些关于浏览器兼容性问题的css问题，先归纳总结如下：
（1）在一些现代浏览器（opera，chrome，谷歌，safari）中，如果给块级标签如div设置padding后会导致元素的height和width增加，在IE中则不会增加，但是只在IE6中不增加，IE7以上在IETester中测试都会增加,解决办法：可以使用 !important 多设一个 height 和 width


（2）使元素水平垂直居中：垂直居中：将该元素的line-height设置为元素本身的高度，再通过vertical-align： middle；（ 注意内容不要换行），水平居中：将元素的margin设置为auto；但是在IE5下没有效果

（3）想给像a，spa这样的行内元素进行样式设置，需要将它的display设置为block

（4）IE在浮动时候产生的双倍距离：若给一个div设置了float,
并且设置了margin，IE5和IE6会产生双倍的间隔，但是在其它的IE版本下就不会，在一些现代浏览器中也不会。解决办法：给该元素添加一个样式：display:inline即可


（5）第二点是 ie对于css的magin padding 等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。

（6）firefox不支持hand，但ie支持pointer ，两者都是手形指示。 解决方法：统一使用pointer。

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

（8）作为外部wrapper的div不要定死高度， 最好还加上 overflow： hidden;以达到高度自适应;

（9）透明度问题：IE下：filter:alpha(opacity=opacityValue);其中opacityValue的值为0-100的整数，firefox下以及其他浏览器：opacity=opacityValue;其中opacityValue的值为0-1的小数

（10）有关float属性带来的差异性:
   1:如下情况：  
    .left{width: 300px;height: 300px;float: left;border:1px solid black;}
    .center{width: 400px;height: 400px;float: left;border:1px solid black;}
    .right{width: 200px;height: 200px;border:1px solid black;clear: both;}
   <div class="left">one</div>
   <div class="center">twod</div>
   <div class="right">three</div>
  （简写）在IE7及以上还有一些现代浏览器中会发生布局错位，而在IE5和IE6中会发生类名为right的块在前面两块右侧正常显示，一般会给right加一个css样式进行限制：clear:both

  2:作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性.用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

  (11)当内部元素面积大于外部元素面积时：如下例：
   .page{width: 920px;height: 300px;background: purple;margin: 0 auto;}
   .center{width: 400px;height: 400px;border:1px solid black;}
  <div class="page">
   <div class="center">twod</div>
  </div>
  虽然外部元素定义了宽度，在IE5和IE6中，page的背景颜色会随着内部元素的高度变，但是在IE7及以上，page的背景颜色渲染的还是page本身定义的面积，不会随着内部元素比自身大而改变

  （12）高度不适应问题：
    .page{width: 920px;auto;background: purple;margin: 0 auto;}
    p{margin-top: 20px;margin-bottom: 20px; text-align:center;}
    <div class="page">
     <p>aaaasddddddddddddddddddddddddddddddddddddddddd</p>
    </div>
    在IE5、IE6、IE7中都会有正常的高度自适应，但是在IE的其他版本中以及所有现代浏览器中，page的背景渲染只会容纳p元素本身的高度
   解决办法：在p标签前后定义两个空的div，并且样式设置为如下：
   
    .page{width: 920px;auto;background: purple;margin: 0 auto;}
    p{margin-top: 20px;margin-bottom: 20px; text-align:center;}
    .empty{height:0px;overflow:hidden;}
       <div class="page">
       <div class="empty"></div>
       <p>aaaasddddddddddddddddddddddddddddddddddddddddd</p>
       <div class="empty"></div>
       </div>
      这种方法在IE5中会再次增加高度，在safari中没有效果，但是在其他现代浏览器以及IE的其他版本中都是可以正常显示的

(13)在无序列表中，如何设置使超出li元素的部分以省略号显示：isplay:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;若该li元素在table中，则需要再增加一个样式：table{table-layout: fixed;}才会正常显示。这个显示除了在IE5中不能正常显示外，在其他浏览器中都可以正常显示


（14）IE6下图片下方会有空隙.解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom

(15)文字和表单对齐方法：

css浏览器兼容问题(在IETester及其他浏览器中亲试过)

标签：

原文地址：http://my.oschina.net/sunshinewyf/blog/489140