整理上个项目中css+div兼容性遇到的问题

首先就是恶心我最久的PNG透明

div. menulogo                           //前面的DIV一定要加上,这里最容易被忽略,但这里真的很关键

{

float:left; width:300px; background-position:top center; height:245px;

background-image:url(../images/stLOGO.png)!important ; background:none;      //针对IE6外其它浏览器,!important

filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='../images/stLOGO.png',sizingMethod='image');                                           //IE滤镜,不解释

}

紧接着就会遇到,在png透明图片的背景上a标签失效的问题,解决方法如下

 

 

方法1.在连接上的a的样式里面加上position:relative ; 这里得注意个问题。在这个设置position:relative;

父块不能 设置有 position:absolute ， 不然失效

 

方法2.运用副边距,将a标签叠加到透明的背景上,(Ie8不支持)

 

兼容的最小(最大)宽度(高度)

IE6没有min-wight

img{width:expression(this.offsetParent.clientWidth>650?"650px":"auto" ); max-width:600px; }  

//-->翻译:"宽度:表达式(如果这个元素对象的宽度大于650像素则为650像素,否则为自动)

 

兼容的透明效果

background-color:#Ff0; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;

 

 

兼容的css自动换行样式

pre {

white-space:pre-wrap;/*css-3*/

white-space:-moz-pre-wrap;/*Mozilla,since1999*/

white-space:-pre-wrap;/*Opera4-6*/

white-space:-o-pre-wrap;/*Opera7*/

word-wrap:break-word;/*InternetExplorer5.5+*/

}

 

IE6 下 a:hover 的 BUG

IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。

解决方案,本别再a，a:hover下添加不同属性

a{boder:none;}

a:hover{padding:0px;}

//表面看着完全无意义的属性,就是兼容性

 

 

IE下li产生间距的BUG

li 设置样式: vertical-align: bottom ;

//强送解决......

 

 

 

div内的image或FLASH，div在火狐会比IE的高

在高的DIV加样式： vertical-align:top ;

 

 

FileUpload 的宽度

<asp:FileUpload ID="FileUpload1" size="60" runat="server" Width="90%" />

考虑到FileUpload控件与Button最终都生成（Render）HTML中的Input元素，可以使用样式表直接设定input元素的 height值，即可让ASP.NET Button的高度与FileUpload控件的高度一致。

//size设置火狐的宽度,width设置IE的宽度

如果有更好的方法请留言,谢谢

 

DIV浮动后，FF下没有margin-top

添加此属性： display:inline-block;

 

 

希望各位有更好的方法或建议请留言 ~

写的乱七八糟~以后一定要一边做一边记录,趁着还没忘光赶紧的记录下