自我总结CSS中的陷阱（长期更新）

iliyaku 发布于2019-08-28 18:08 / 2384人阅读

摘要：低版本万恶的不支持通过解决，或者是。不支持动画属性通过解决下双倍边距问题通过解决。简单的解决方案时为相对定位的框设置宽度和高度。不能写进一个声明中。

低版本IE bug 万恶的IE6/7

IE6 position:fixed不支持：通过css expression解决，或者是_position:absolute。

* html, 
* html body {
          background-image: url(about:blank);background-attachment: fixed;
}

* html #menu {
          position: absolute;bottom: auto;top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+"px");
}

IE6 png24 : 通过DD_belatedPNG.js解决。

IE678不支持css3动画属性: 通过http://gucong3000.github.io/transform/解决；

IE6下双倍边距问题：通过*display:inline解决。

IE6下非a标签的:hover伪类无效：通过JS操作解决

IE6下用border属性写三角形
如果用

          border-width:10px;
          border-color: transparent  transparent transparent transparent;
          border-style:solid;

这样写的话会出现黑边，
解决方案是使用

doshed：border-style:dashed dashed solid dashed ;

IE6下绝对定位的bug

相对于相对定位的祖先元素对框进行绝对定位，这在大多数现代浏览器中实现得很好。但是，在windows上的IE5.5和IE6中有一个BUG，如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。如果没有，那么IE会相对于画布定位这个框。简单的解决方案时为相对定位的框设置宽度和高度。

怎样让ie浏览器支持最小高度

IE不识别min-这个定义，实际上它把正常的width和height当作有min的情况来使用的。

min-height:200px;
height:auto;
_height:200px;

注意 height一定要在_height之前。

无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,
例如:overflow:hidden | zoom:1 | line-height:1px

IE6下为什么图片下有空隙产生？

解决方法是可以改变html的排版，或者设置img为display:block
或者设置vertical-align属性为vertical-align:top|bottom|middle|text-bottom;

IE7以下不支持display:inline-block

解决方案：
第一种：专门为IE7写Hack

 display:inline-block;
 *display:inline;
 *zoom:1;

特别是 ZOOM:1 这个必须的(触发haslayout)

第二种：

.selector { display: inline-block }
.selector { *display: inline }

注意这两个 display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将 display设回inline或block，layout不会消失。不能写进一个声明中。

另外：input、select、button、textarea的默认display皆为inline-block,所以    在布局时应加以注意...

其他bug

火狐下链接视频显示不出来

原因：z-index导致，使用如下嵌入方式。并用wmode="Transparent"

IE9一下不支持input:disabled的样式修改 IE7下直接使用jquery blur无效，通过settimeout设置blur()即可

云服务器 GPU云服务器 vps日常维护中的一些要点总结面试陷阱创业陷阱陷阱清单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111041.html

Java核心技术教程整理，长期更新

以下是Java技术栈微信公众号发布的关于 Java 的技术干货，从以下几个方面汇总。 Java 基础篇 Java 集合篇 Java 多线程篇 Java JVM篇 Java 进阶篇 Java 新特性篇 Java 工具篇 Java 书籍篇 Java基础篇 8张图带你轻松温习 Java 知识 Java父类强制转换子类原则一张图搞清楚 Java 异常机制通用唯一标识码UUID的介绍及使用字符串...

Anchorer 2019-08-16 12:33 评论0 收藏0
JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制

摘要：所以，抛开这些歧义和陷阱，我的问题变成了标签的位置会影响首屏时间么然而答案并不是那么显而易见，这得从浏览器的渲染机制说起。说明：本文提到的浏览器均是指Chrome。 script标签指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即白的，有些手段过头了反而降低性能，所以在讨论条件和结论的时候，虽然很多条件本身会带来其他细微的负面或正面影响，为...

VincentFF 2019-08-19 17:22 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0