CSS兼容问题

2018-05-02  本文已影响0人  时光机321

一、ie8的css兼容

1、ie8支持:first-child,但不支持:last-child。因为前者是css2.1标准,后者是css3标准

2、 input设置了左右padding,but输入较多内容时padding还是会消失。这个问题是无解的,ie浏览器她就是这么渲染input的,解决方法是在input 外面套一层div,用div设置左右padding,border,width和height,input只需要设置width和weight为100% 即可。另外,正常来讲,如果没有明确设置height的值,那么设置的line-height值就是height的值,but对于ie8,如果input 设置了 line-height,那么input必须设置height,否则input的内容显示有问题,会上下隐藏部分内容,她就是要躲猫猫。

3、sprite图中的icons之间最好留空白间隔,哪怕间隔1px也好,否则ie8下会出现使用了某一个icon当背景,icon后面跟着的其他icon也顺带显示了一小部分的bug,所以icons之间还是要适当留白,不要太省。

二、ie11部分css问题

1、 ie11下很多元素表现和其他浏览器不一致,比如对应用了同一样式(不设置 高度)的div,其他浏览器解析的高度是一致的,但是ie11下该div有可能高度偏大,由此导致一些排版上的问题,所以,如果发现元素排版上下偏移的问题,查看此元素或其当代元素是否设置了高度,统一添上高度一切都ok了。

三、IE6兼容

1、IE6双倍margin间距解决方法

float:left;margin-left:10px;

当一个css样式同时设置了float和margin的属性的时候,在ie7+及火狐上,该元素显示正常。但是在ie6下,将会出现双倍的margin-left属性值,也就是上面那段代码中的div在ie6下的实际margin-left的值是20px;

解决此办法的最简单的方法是,在style中添加:display:inline;

如上面的代码将改为:

float:left;margin-left:10px;display:inline;

四、IE CSS兼容问题

1、CSS透明问题

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF:opacity:0.6。

[注] 最好两个都写,并将opacity属性放在下面。

五、firefox兼容问题

引用: https://www.cnblogs.com/suspiderweb/p/5277540.html

上一篇下一篇

猜你喜欢

热点阅读