ie7bug 记录

1、media 需要降级处理。response.js
2、z-index 问题为父级的层级,在表单时候有自定义下拉菜单的特别需要注意。
//3、hover下拉菜单的时候碰到下层元素有单侧浮动的时候,到一定的位置,下拉菜单消失。这个bug碰到过两次。将两侧的元素都浮动。 //层级问题

4、ie7经常通过js改变元素高度的时候,造成内层元素重绘的时候定位出现错误。貌似将relative的元素设置为absolute的表现。解决方法,尽量较少的使用js影响页面造成重绘。 //避免回复

5、ie7页面元素右侧浮动掉下。解决方法将右侧浮动元素至于元素左侧。

6、inline-block bug、display:inline;zoom:1解决。
7、ie7 text-indent 在(inline-block? )会表现为padding-left的效果。

8、placeholder、ie7、ie8、ie9,不支持,当我们在写登陆或这表单的时候需要降级处理。用一个绝对定位的元素来模拟placeholder的值。

9、ie file value 的值无法清除的问题。重置file的html。

10、input inline 元素对齐问题。可以参见 张鑫旭的博文。

11、clip在ie6、ie7的写法与标准不同clip(0,0,0,0)//标准,clip(0 0 0 0);//ie6、7

12、利用重绘解决IE下JS交互产生的定位重叠等棘手bug。
eleBox.style.visibility = "inherit"; eleBox.style.visibility = "visible";两者状态进行切换
13、ie7 ui_checkbox采用回退机制 采用元素的样式表现

经过了一番实践和一些基本的兼容处理,至少在移动端flexbox还是有可为的(安卓4.0+,2.3+没测试,ios都还行)。但是坑也确实还有很多。
1,flexbox有多个版本,在低版本安卓下实行的是09年的旧版标准Flexible Box Layout Module**这个标准需要添加-webkit-前缀。其余的实行的是新的flexbox标准CSS Flexible Box Layout Module Level 1**,其中ios9以下Safari需要添加-webkit-前缀。
2,旧版flexbox标准各浏览器支持属性有限,比如说不支持flex-wrap等。所以如果考虑兼容性的话需要只使用旧版标准中浏览器可以支持的属性。
3,还是旧版的问题,旧版的使用比例伸缩布局时会导致盒子内容大小不等会导致无法‘等分’等布局。这个时候需要设置width:0%;等把原始大小设置成0。
4,依旧是旧版的问题,旧版的box item要求属性是块级结构,所以很多inline元素需要设置display:block等才能显示正常。
5, 新发现 text-overflow: ellipsis;在display:flex元素上无效。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,269评论 4 61
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,659评论 32 459
  • 这是全世界最可爱的一株 最勇敢、最有个性的一株 也是最倾城、最阳光的一株 ...
    给洎巳一个别致啲微笑阅读 318评论 1 0
  • 创建版本库1.创建目录 mkdir learngit,进入cd learngit2.将目录变成Git可以管理的仓库...
    隔壁老C阅读 267评论 0 0