从今天开始记录用的过的所有CSS样式兼容的问题
-
IE双倍浮动边界:
在IE里面,一个外面的DIV容器里面套有多个有float属性的元素,并且指定了margin和pading属性,外面的DIV容器将产生双倍margin的内间距,把里面有float的元素指定display:inline属性解决这个问题。
-
IE7内button按纽忽隐忽显:
在IE7内,拉动滚动条导致button按钮内的文字忽隐忽显有时候就显示一半,或这个里面文字全部不可见,造成个问题的原因是改button样式继续了base样式里面的overflow:visible,重写overflow为hidden即可解决。
注:不推荐使用button标签,曾测试过在支持html4的ie8里button支持新的属性type(button|submit),以前我们使用button主要是用来关联一个js客户端的click函数事件,而在ie8里面button的默认type=submit的,所以你一点button不但不会触发click函数事件,而且还会刷新页面提交表单,非得一定设置type=button且onclick=return function (){//函数;return false;}才行。
-
清除浮动:
把浮动子元素的父容器元素加上overflow:auto;zoom:1;即可,对于标准浏览器而言,父容器的 overflow 设为除 visible 之外的值将闭合浮动元素,而对于IE系列浏览器而言,zoom:1触发了 layout 而会自动闭合浮动(本来设置dispaly:inline-block也可以,但是好象在IE5里面不是很支持,而且FF2也不支持,到FF3才支持,所以不建议使用dispaly:inline-block)。优点:兼容所有IE和标准浏览器,且不需要额外写个无意思的DIV层专门用来清除浮动,不需要新增after伪类等hack,不需要改变父容器元素样式为浮动,但是有时候设置overflow 设为除 visible 之外的值会冲突。
-
IE6完美支持PNG24格式透明背景图片:
不需要写任何的js代码,使用filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',sizingMethod='image')滤镜,能在IE5.5+以上版本使用,sizingMethod缩放方式有三个值image、crop、scale,默认为image将增大或减小对象的尺寸边界以适应图片的尺寸,crop剪切图片以适应对象尺寸,scale缩放图片以适应对象的边界,样式的话先照常定义背景background:url(bg_nav.png)!important;指定important是让IE7+和一些标准浏览器来识别,后面再加上background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',sizingMethod='image');IE6浏览器内写在一起的background加上!important权重值会无效,后面的仍然会覆盖前面的,所以background会先被清空(不清空会和背景滤镜有冲突),然后再使用滤镜,这样写的样式表所有IE及标准浏览器就都能识别PNG格式的透明背景了,需要注意的是滤镜的图片地址是引用样式表文件的页面相对图片的地址,而不是样式表相对图片的地址。IE使用滤镜透明背景后这个层里面使用link和button都会出现无焦点的BUG,把这些元素的position设为relative即可,把link的position设为relative后又发现之前使用的background:url(bg_nav_up.gif) center top no-repeat背景垂直定位发生错误,背景图片上对齐时候link的文字上方的一大半背景却不见了,下对齐背景图片正常显示,经过一段时间的摸索,发现指定了link的高度就有了,FF等其他浏览器不存在这些问题。