div+css设计应该注意的一些兼容性问题(一)

div+css设计应该注意的一些兼容性问题(一)

                                                                                               
                    1、css命名不能带下划线开头，不然ie6某些版本不识别。如 <div class="_box"></div>，也最好不要用数字开头。
2、IE6下DIV最小高度不能为0或小于12的解决方法。
在网页布局时常会用到DIV来显示一些边角背景，或者空内容的div，需要设置较小的高度，默认情况下，IE6中设置DIV较小高度会不起作用，在 IE7、FF等浏览器不存在这个问题。
IE6下默认的字体尺寸大致在12 - 14px之间，当你试图定义一个高度小于这个默认值的 DIV 的时候，IE6会固执的认为这个层的高度不应该小于字体的行高。所以即使你用height:5px;来定义了一个DIV的高度，实际在IE6下显示的仍然是一个12px左右高度的层。
要解决这个问题，可以强制定义该DIV的字体尺寸，或者定义overflow属性来限制DIV高度的自动调整。比如:
<div style="height: 5px; font: 0px Arial; line-height:0;"></div>
或者
<div style="height: 5px; overflow: hidden;"></div>
值得注意的是，设置 font-size:0 时这个容器的高度最小为 2px ，如果要设置DIV高度为0或1px，则需要使用 overflow:hidden; 来实现。
3、IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法。
先看css代码:
div {   
  float:left;   
  margin-left:10px;   
  width:420px;   
  height:150px;   
  border:1px solid red;
}
这样设置左边距设置为10px，但IE6.0解释为20px，解决办法就是是加上display:inline;
码
<p>div {   
  float:left;   
  margin-left:10px;   
  display:inline;   
  width:420px;   
  height:150px;   
  border:1px solid red;

div+css设计应该注意的一些兼容性问题(二)

                                                                                               
                    }
4、htmll中width元素无效的解决办法。对于内联元素（span,a 或者 display: inline元素），对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
方法一，
如果设置display:block，width属性生效，但是此时的span跟div一样了。
如果设置display:inline-block，则span并列在同行，而且width属性生效。
元素display属性的常见值说明：
block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。
inline：内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。
inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
none:藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间。
解决方法二，如果设置float:left | right,width属性生效.
(浮动)他使得指定元素脱离普通的文档流而产生的非凡的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。
display：inline属性与float的区别
Display：inline；属性的作用就是使块级元素变成行内元素，比如p这样的，设置inline属性以后，就会不再单独占据一行的位置了。不过使用float 属性页同样可以实现这样的效果。 （关于行内元素和块级元素请看行内元素和块级元素） css中块元素和内联元素有什么区别？
当元素设置成为inline属性，变成行内元素以后，设置width属性也就没有效果了。
看完display：inline对块级元素的影响以后，我们再来看看float对行内元素的影响
也就是当行内元素设置float属性以后，实际上他已经认为他是块级元素了，可以设置 width属性了。
5、页htmll中有注释:   ie正常,firefox就不正常
解决方案：
注释内容两边的“—”一样长就好了。
6、Firefox 和 IE 都支持的 Alpha 透明效果
view plaincopy to clipboardprint?
filter:alpha(opacity=50);       /* IE

div+css设计应该注意的一些兼容性问题(三)

                                                                                               
                     */   
-moz-opacity:0.5;              /* Moz + FF */   
opacity: 0.5;           /* 支持CSS3的浏览器（FF 1.5也支持）*/  
filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;              /* Moz + FF */
opacity: 0.5;           /* 支持CSS3的浏览器（FF 1.5也支持）*/</p>IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数。
本文来自CSDN博客：http://blog.csdn.net/dengxingbo/archive/2010/03/14/5377937.aspx