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元素上无效。