美文网首页
兼容问题

兼容问题

作者: 才気莮孒 | 来源:发表于2017-06-12 21:51 被阅读0次

padding与宽度高度

FF或者设置padding后,div会增加height和width,但IE不会,故需要用!important多设一个height和width

!important:FF火狐和IE7对于!important会自动优先解析,IE6以下则忽略,可用!important为FF火狐和IE7单独设置样式,不影响IE6的显示,值得注意的是,一定要将xxxx  !important这句放置在另一句之上

div的垂直居中问题

div的垂直居中问题:vertical-align:middle,只有在具有valign属性的元素中设置才有用

将行距增加到和整个div一样高 line-height行高,然后插入文字,就垂直居中了,缺点是要控制内容不要换行

vertical-align:middle,div元素里面的文字不垂直居中,解决:设置行高,line-height:行高

ul和ol列表缩进问题

消除ul,ol等列表的缩进时,样式应该写成list-style:none;margin:0px;padding:0px;其中margin属性对IE有效,padding属性对FireFox有效。在IE7以下中仅仅这只margin:0px;padding:0px;以及list-style:none三项才能达到最终效果

css透明问题

IE:filter:alpha (opacity=50)  在IE6中没用

FF: opacity:0.6 在IE8以下没用

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

css圆角问题

IE8以下不支持圆角,圆角使用背景图片

FF:-moz-border-radius:圆角弧度

谷歌:-webkit-border-radius:圆角弧度

cursor

只有IE8以下支持cursor:hand

所有浏览器都支持cursor:pointer

解决方法:统一使用pointer

字体大小定义不同

对字体大小small的定义不同,FireFox种为13px,而IE6种为16px,差别挺大

解决方法:使用固定的字体大小

IE的双边距BUG

当几个浮动元素同时设置margin边距是,浮动方向和浮动边界的方式一致,第一个元素的边距会是其他边距的双倍

解决方法:css  hack  原来的margin-left 设置为margin-left,将边距设置为原来的一半,这种方法只能在IE6中起作用,火狐中不作用

给第一个或所有元素设置属性display:inline;

css Hack  技术标准

由于不同厂商的浏览器或某浏览器的不同版本(如IE,FireFox,Safari,Opear,Chrome等),对css的支持,解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这是,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的css样式,我们把这个针对不同的浏览器/不同版本写响应的css  code的过程,叫做 css hack!

css hack

IE6   _   _background:red;

IE7   *    *background :red;

IE8  \0或者\9(加后面的)background\9:red;

IE9  \9(加后面的)

FF:    !important(加后面)  一般不用,能用其他办法解决的都不用

css  hack大致有3种表现形式

css类内部hack  ,选择器hack   HTML头部引用(if  IE)hack

相关文章

  • 兼容性问题

    CSS兼容性问题PC页面布局兼容JS兼容问题移动页面兼容问题 CSS兼容问题.header {_width:100...

  • 浏览器兼容

    什么是浏览器兼容问题 为什么会有浏览器兼容问题 用到的网站 处理兼容问题的思路 渐进增强和优雅降级 stackov...

  • vue2配置axios

    axios配置源码解决兼容问题1解决兼容问题2 npm install axios -s 在main.js中进行以...

  • Unable to import maven project:

    一 版本兼容问题 1.查看日志 在Stack Overflow搜索下可知道这是maven与idea的版本兼容问题,...

  • WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

    index WEB前端开发人员须知的常见浏览器兼容问题及解决技巧 __yzp 为什么会有兼容问题? 由于市场上浏览...

  • 一个es6兼容性写法的问题

    一个解构语法兼容问题:在360(9.1.0) 上的版本里 在对象里解构对象,有兼容问题,用babel.js也不好使...

  • Bug

    object doesn't support property or method append IE兼容问题 ...

  • Android 相册图片选取(Gif,视频,图片)

    介绍 由于三方库更新慢,以及出现各种各样的机型兼容问题(大图,文件格式,华为加载慢,图片旋转,高版本URI兼容问题...

  • ie8兼容问题

    ie8中遇到的兼容问题以及解决方案 一.CSS3 1.可以通过在css中引入pie.htc,处理兼容问题(可处理的...

  • uni-ui 1.0 正式发布:高效的移动端 Vue 跨端UI库

    前言 众所周知,浏览器的兼容问题一直为人诟病,为了解决跨端兼容问题,DCloud官方推出了一款官方UI库——uni...

网友评论

      本文标题:兼容问题

      本文链接:https://www.haomeiwen.com/subject/jwlrqxtx.html