CSS ブラウザの互換性の問題 (IETester および他のブラウザで試行)_html/css_WEB-ITnose

最近在研究一些关于浏览器兼容性问题的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;}
  

one

  

twod

  

three

  （简写）在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;}
 

  

twod

 

  虽然外部元素定义了宽度，在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;}
   

    

aaaasddddddddddddddddddddddddddddddddddddddddd

   

IE5、IE6、および IE7 では通常の高さの調整が行われますが、IE の他のバージョンおよび最新のすべてのブラウザーでは、ページの背景レンダリングは p 要素自体の高さのみに対応します
解決策: p tag 前後に 2 つの空の div を定義し、次のようにスタイルを設定します:

.page{width: 920px;auto;background: purple;margin: 0 auto;}
p{margin-top: 20px;margin-bottom: 20px; center：center;} .empty {height：0px; hidden;}
p＆gt; aaasddddddddddddddddddddddddddddddddddddddddddddddddddd;/P＆gt;順序なしリスト、li 要素以降の部分を省略記号で表示するように設定する方法: isplay:block;white-space:nowrap;別のスタイルを追加するには: table{table-layout:fixed;} 通常どおりに表示します。この表示はIE5では正常に表示できないことを除けば、他のブラウザでは正常に表示できます


(14) IE6では画像の下に隙間ができてしまいます。 解決策：display:blockを追加するか、vertical-align属性を設定してください。 img の場合vertical-align:topbottom|middle|text-bottom

(15) テキストとフォームの配置方法: