2019独角兽企业重金招聘Python工程师标准>>> hot3.png

CSS

IE10~11 透明滚动条

透明滚动条不占空间,显示时会覆盖内容

//--如下样式使滚动条变为普通样式
body {/* ... */-ms-overflow-style: scrollbar;
}

IE10~11 输入框多个叉号

点击叉号会清空输入框内容,会覆盖自己定制样式,可能不会富客户端框架的一些事件 input::-ms-clear { display: none; }

IE8 背景透明时无法响应事件

IE8以下的浏览器bug,背景透明的元素无法点击(实际点击的是其底层的元素)
对需要透明的div添加背景图片,图片为透明的png

IE8 png图片有黑色边框

PNG的支持问题在于IE7及以上版本使用了filter来支持PNG的Alpha通道,
所以对于PNG来说其实已经偷偷被应用了一个 filter了。
虽然解决了主要的PNG透明问题,不过也伴随着另一个副作用,就是不能再应用其他filter。
或者准确地说是应用其他filter会破 坏IE对PNG的支持。这就是为什么PNG在渐隐和渐现的时候会有难看的黑边。

IE8 不支持background-size属性

如果必须做背景拉伸,可以添加一个100%的div,并添加一个img图片,设置div的z-index为负数

IE8下A标签的文字无法响应拖动事件

IE8不支持A标签意外的标签的:hover伪类

如果使用了,可能但不一定导致渲染问题

IE6~IE7 float:right换行

将需要浮动的元素放到不浮动的元素前定义

IE7 下div设置了margin-left,直接子元素input添加margin-left空隙为两个的和

div设置了margin-left,直接子元素input 使用margin-left时会有间隙会是两个的和, 解决方案为在input外包一层span

<style type="text/css">body{margin: 0;padding: 0;}.contant{background-color: gray;width: 100%;height: 200px;margin-left: 100px;}.contant input{margin-left: 100px;}
</style><div class="contant"><input type="text" />
</div>

div无法覆盖Object引入的浏览器插件(视频/weboffice等)

可以在需要覆盖插件的弹出层中添加一个iframe,iframe大小为此div的带下,z-index设为负数

<div class='msg_mask'><iframe src=\"javascript:''\" style=\"position: absolute; visibility: inherit; border: 0px; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe></div>

css的disabled选择器

input:disabled IE8-不支持
input[disabled] IE6-不支持,但是IE7~IE8支持
IE9及以下disabled选择器无法改变字体颜色。

:first-child IE7问题

 IE7 会将一个注释或者文字节点当成first-child,而不是只有元素才是“子”元素。所以,如果在第一个子元素前有注释或文字,IE7会匹配之而不是去匹配第一个子元素。

转载于:https://my.oschina.net/sandant/blog/698569

Css 浏览器兼容性及其其他常见问题相关推荐

  1. CSS浏览器兼容性问题详解总结

    CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题 比如 border: 0xp solid #fff;两个浏 ...

  2. CSS浏览器兼容性问题

    CSS浏览器兼容性问题 1.浏览器CSS样式初始化 最简单的初始化方法就是:使用通配符(*),重置所有的初始样式. *{margin: 0;padding: 0; } /* 10px=1rem */ ...

  3. CSS浏览器兼容性与解决方法

    一.什么是浏览器兼容性问题? 所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况:而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的. 认识浏览器内核 ...

  4. CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化、浏览器私有属性,CSS hack语法和自动化插件...

    前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...

  5. 浏览器与css的兼容,CSS浏览器兼容性与解决

    一.超链接访问后hover样式不出现 1.现象描述: 同时设置了a:visited和a:hover样式,但一旦超链接点击过后,hover的样式就不再出现了. 2.解决方法: 调整样式顺序为先a:vis ...

  6. html网页自动兼容模式,解决CSS浏览器兼容性问题的4种方案

    前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配.兼容性问题. 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frire ...

  7. HTML css——浏览器兼容性

    浏览器兼容性 问题产生原因 市场竞争 标准版本的变化 厂商前缀 市场竞争,标准没有正式发布 标准仍在讨论,厂商希望先支持 比如 box-sizing. 谷歌旧版浏览器中使用-webkit-box-si ...

  8. css浏览器兼容性的问题

    1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居中.将 line-height ...

  9. CSS浏览器兼容性----Hack

    CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器. 类内部Hack:比如 IE6能识别下划线&qu ...

最新文章

  1. EOS Chain/Wallet RPC API的PHP开发包
  2. 客户端如何连接 DataSnap Server 调用服务的方法
  3. altium pcb 信号高亮_Altium Designer PCB的时候 高亮显示引脚连线
  4. 全球及中国便携式卧式空压机行业前景动态与投资趋势分析报告2022版
  5. 增强for循环、Map接口遍历、可变參数方法
  6. No relevant classes found. No output generated、metaObject连接错误
  7. 微软bi 架构 服务器,微软BI体系结构.
  8. P4287-[SHOI2011]双倍回文【PAM】
  9. Flask项目--爱家租房项目结构图
  10. 用计算机解题 算法理科,求解数独算法求用计算机可以实现的算法不要人工解题思路 爱问知识人...
  11. Axure经典案例高保真下载(智慧水务、智慧泵房、水厂监控、营收管理、DMA漏损、维护管理、档案管理、仓库管理、水质监控、数据中心、调度指挥中心)
  12. 【html】表单元素练习
  13. Face Recognition
  14. IS-IS详解(十八)——IS-IS 缺省路由
  15. 编译原理完整学习笔记(三):词法分析
  16. Set集合之CopyOnWriteArraySet
  17. 如何备考PMP考试?
  18. 使用xlsx.core.min.js进行导入(表格)导出(Excel)功能
  19. Rational.Rose7.0系统软件
  20. 使用youtube语音识别功能给视频加自动字幕

热门文章

  1. 延长计算机屏幕显示时间,非充电状态下延长计算机使用时间的小诀窍!
  2. Canvas绘图在微信小程序中的应用:生成个性化海报
  3. Python面向对象---类的基本使用
  4. python中常见的双下方法_python中常见的双下方法_python面向对象(5)__特殊双下方法...
  5. Spring框架在属性注入时@Autowired和@Resource的区别
  6. js字符串的操作方法
  7. 计算各种图形的周长(接口与多态)_JAVA
  8. 两个排序数组合并第k或前k个最小值问题
  9. 网站添加自己公司的地图(使用的百度地图)时只显示一个空白框
  10. mysql修改表、字段、库的字符集(转)