• DIV+CSS设计要注意的问题

    2010-12-24

          做网站DIV+CSS设计要注意的问题

    1、css 命名不能带下划线开头,不然ie6某些版本不识别。如 <div class="_box"></div>.

    2、IE6 下 DIV 小高度不能为 0 或小于12 的解决方法。

    在网页布局时常会用到 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解决方法。

    4、html中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:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
    non:隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间。

    解决方法二,如果设置float:left | right,width属性生效.
    (浮动)他使得指定元素脱离普通的文档流而产生的非凡的布局特性。并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

    display:inline属性与float的区别
    Display:inline;属性的作用就是使块级元素变成行内元素,比如p这样的,设置inline属性以后,就会不再单独占据一行的位置了。不过使用float 属性页同样可以实现这样的效果。 (关于行内元素和块级元素请看行内元素和块级元素)
    当元素设置成为inline属性,变成行内元素以后,设置width属性也就没有效果了。
    看完display:inline对块级元素的影响以后,我们再来看看float对行内元素的影响
    也就是当行内元素设置float属性以后,实际上他已经认为他是块级元素了,可以设置 width属性了。

     5、页html中有注释: <!-- 中间 左边 ------- -->  ie正常,firefox就不正常
    解决方案:
    注释内容两边的“—”一样长就好了。