IE FF Chrome 浏览器 css BUG

IE7 浮层遮挡

浮层遮挡情况想必大家在测试网页布局师会有遇到过吧,如果浮层中的元素覆盖的区域含有设置了postion:relative的元素,在IE7中浮层就有可能无法遮挡这些元素

解决办法:将浮层的父元素加上z-index即可


IE7 子级元素不随父元素滚动的处理方法

在IE6,IE7下,子元素使用position:relative、父元素使用overflow:auto后,我们预期的是滚动条滚动时,子元素也随着滚动,实际情况是内容不滚动,就感觉你是定位定在那里了。

解决办法:是父元素添加position:relative样式。


CSS 父级背景透明子级不透明的兼容写法

background:rgba(0,0,0,0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

当然没必要自己写可以通过这个站点自动生成http://leegorous.net/tools/bg-alpha.html


IE8中

selector.css('width') 如果宽度值有小数 则小数会被省略

IE9中表格错位

IE9下的表格错位 是由于td 与 td 之前及td与tr 之前 tr与 tr之前的空格引起的
若表格上没有绑定一些操作(js事件)就可以通过替换掉表格间的空格来处理

var content = $("table").html();  //IE9兼容 bug
content = content.replace(/td>\s+<td/g, "td><td");
$("#p-j-tableList").html(content);

若是表格中有操作的话 就不适合用以上的方法去处理,上面的方法 会将表格的html替换掉,绑定的事件也会被去掉(DOM已经不是原来的DOM)
建议的方式是

<table>
  <tr><td>
      //code...
      </td><td> <!-- 标签的开头与结尾相连 -->
      //code...
  </td><tr>
</table>
//标签的开头与结尾相连 也就能保证标签之间没有空格存在 

IE 各版本样式表现不一的处理办法

可以用css hack写法(自行百度)


火狐浏览器中 table的边框部分消失

原因:table中包含有空的tbody标签
解决版本:去掉多余的空tbody

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,326评论 0 5
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 2,080评论 2 15
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,310评论 0 3
  • CSS 单位尺寸: 颜色: 尺寸属性: width/height:宽高 overflow:当内容溢出元素框时如何处...
    南山伐木阅读 500评论 1 0