Loading...

一些CSS小窍门

2008-08-24 19:42:02 发表于网站技术 本文链接: 一些CSS小窍门

CSS兼容是一个很头疼的问题,浏览器太多,有不守规矩的IE6、比较守规矩的IE7和将来不知道怎么去守规矩的IE8,不断进化的IE和多浏览器共存将会给很多web开发者带来新一轮的头疼问题。朋友可能注意到,我前面的浏览器都只提了IE,而没有说FireFox。可能在以前,很多web开发者特别是国内的web开发者根本就没有兼容的这个烦恼,首先他们不关心Firefox,并且那个时候的页面也不是DIV+CSS模式,即使后来DIV+CSS模式流行起来了,他们依然不关心兼容的问题,因为在他们心中就只有一个IE6,需要和谁兼容去?可是如今IE也开始不让他们消停了,这不得不说是一件好事情。首先IE本身的多版本已经让国内大多数开发者开始注意兼容的问题了,而从IE7可以看得出来,微软也慢慢的在向标准靠近,最终解放的还是we开发者。而微软浏览器特有的渲染效果逐渐被淡化也是一个很好的现象,至少我们现在很少看到网页在用vbs脚本了!

cosbeta在业余做网页的过程中也遇到不少的麻烦,然而都能很好的解决掉了,在此过程中,也算是积累了不少的经验,打算在这里写下来,和大家一起分享。

  1. div居中的问题。有这样一个需求,整个网页的宽度是800px,需要将页面居中,如本blog(storyday.com)。可能你会这样解决(为了方便,下面的css代码多直接写在div中,实际使用请自行选择css代码的嵌入方式)

    main

    left
    right

    footer


    用IE打开看,相当完美,可是你用FF打开看看,问题出来了,因为没有float属性的id=page的div并不会自动适应高度,所以#page没有像你希望的那样将left和right都包含进来了,IE7也是如此,那么下面是我常用的解决办法,今后遇到类似的情况可以如此解决,请注意看class=”page”的css代码:

    main

    left
    right

    footer

  2. UL的问题这个困扰了很多朋友的问题,cosbeta也常常在论坛上遇到这样的提问,因为如论怎么修改,列表在IE和FF中就是不一样,所以这个时候我们要将ul的padding和margin属性给指定出来,如ul{margin:0;padding:0;list-style:none} ul li{margin:0;padding:0},之后你就会发现他们的效果是一样的了,归根结底还是浏览器对ul的默认显示效果不一样所导致。
  3. 空DIV问题和clear:both的问题 空div的问题如下

    这段代码在FF下很正常,div的高度确实是1px,可是在IE下,该DIV怎么都高于1px,于是这个高度差,往往导致整个页面的不协调,这个原因是IE默认div的高度为当前字体的高度,所以比字体小的高度是无法显示正常的,那么知道这一点之后,我们可以这样修改

    clear:both这个css属性是我们在用float方式排版中最重要的工具,比如3个div,left,right和footer,我们需要footer在left和right的下方,即footer换行排列,如果不采用clear:both,可能会不能满足你的要求,不相信看下面的两个例子

    left
    right
    footer


    加了clear:both之后:

    left
    right
    footer


    所以在实际做网页的时候,我们可以定义一个div,样式表为.clear{clear:both;height:1px;font-size:1px}在需要换行的地方,直接插入一个div class=”clear”即可,这个算是cosbeta的技巧,不知道你如何认为呢?

  4. !important的使用我们都知道,在css中总是以最后定义的为准,比如egg{width:100px;height:100px;width:200px},那么实际生效的width应该是200px,而FF和IE有一个important属性,IE6不支持该属性,所以一个DIV,由于不兼容导致我们需要在IE7、FF中设置高度为100px,在IE6中设置为90px,那么CSS可以这样写
    .mydiv{width:100px !important;width:90px}可能这个特性基本都用过吧

其实css 兼容技巧都是在实际中总结出来的,由于记忆的问题,就没有办法一一列举出来,比如上次和zhiqiang讨论一个css的时候就遇到一个怪异的问题,两个div,如果没有border,则总会分开,当设置border为1的时候他们就结合在一起了,至今不知道原因何在。所以如果有朋友如有更多的实战经验,欢迎留言,大家一起记录下来。

标签:
发表于 2008-08-24 19:42:02 目录:网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • homezz 美国专业主机商
    feed url
    上一篇: « 那个闭幕式
    下一篇: 糟糕的MSN安装体验 »
    已经有7位大师动手指导 拒绝低俗
    • 1楼 大猫 在2008.08.25 12:28发表评论如下: 回复

      div居中
      IE align:center,然后子元素align:left
      FF margin:0 auto;
      UL距离
      IE FF默认margin padding都不一样要复位统一一下的,如你所说
      在IE下还有个怪异问题就是激发hasLayout后ol的序列会复位…
      空DIV如果没记错,可以用line-height来控制IE下的行高
      hack比较推荐 *和_ 顺序 FF IE7 IE6
      *67都认识_只有6认识
      float:left;*float:right;_float:none;

      btw,痛恨IE6诅咒IE6

    • 2楼 魑魅魍魉 在2008.08.25 13:32发表评论如下: 回复

      给你推荐三个好方法,居中的方法,链接见我的留言用的网址。

      • 3楼 魑魅魍魉 在2008.08.25 13:32发表评论如下: 回复

        首创建一个包含居中元素的容器,然后将其绝对定位于相对页面左边缘50%的位置。这样,该容器的左外边距将从页面50%宽度的位置开始算起。

        然后,将容器的左外边距设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点,如下:

        #content{

        width:760px;

        position: absolute;

        left: 50%;

        margin-left:-380px;

        }

        这个做法没有任何hack,虽然并不是首选方案,但也是个不错的方法,且适用极广——甚至Netscape Navigator 4.x中都没有问题,所以若想得到最广泛的浏览器支持,那么这种方式将会是最好的选择

        • 3楼附属品 江东 在2008.08.25 13:59发表评论如下: 回复

          很不错的方法,显示loadding div居中的时候有用过

        • 4楼 花果山寨 在2008.08.26 18:00发表评论如下: 回复

          太专业,懒得学!

          • 5楼 朱仔明 在2008.08.27 16:01发表评论如下: 回复

            这几天也在看这方面的资料,谢谢啦!

            评论分页: 1
            (Required)
            (Required, not published)
            如果留言未显示无需重复留言,我将为你恢复!