标签: 设计

  • 完美主义的悲哀

    完美主义者的某些X一直为人诟病,其自身也显现一种病态,完美主义者追求凡事尽善尽美,不遗余力的去完善他的产品,产品的开发周期远胜过它的维护周期。
    每画一个圆他渴求是宇宙中的绝对球体,每一个椭圆他希望离心率为0.618,要么反反复复的修正完美直到极致,乐此不疲。完美主义者需要广阔的知识面所以要学的东西很多,要求的极度苛刻,使得凡事必躬亲,常被折磨得人模狗样注定不会活得太轻松。
    纯正的完美主义者不是病态是变态,因为在他们无法容忍丁点污点,追求唯美,可以吹毛求疵。也许过分追求并不是好事,我们只谈设计,设计需要完美,完美主义者最忌讳的粗制滥造。
    完美主义者,继续低调的高歌.

  • CSS设计遇到的IE6-7 FF兼容性问题

    直接从自己空间COPY过来的,排版上可能会有点乱。

     

    1.概要
    1.所有浏览器 通用
    height: 100px;
    IE6 专用
    _height: 100px;
    IE6 专用
    *height: 100px;
    IE7 专用
    *+height: 100px;
    IE7FF 共用
    height: 100px !important;

    *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
    代码:
    <style>
    #wrapper { width: 120px; }
    *html #wrapper { width: 80px;}
    *+html #wrapper { width: 60px;}
    </style>

    注意:*+html 对IE7的兼容必须保证HTML顶部有如下声明:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

    2最狠的手段 – !important;
    如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略
    (随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.注意写法.声明位置需要提前.)

    <style>
    #wrapper {
    width: 100px!important;
    width: 80px;
    }
    </style>

    3.margin加倍的问题,一个IE6都存在的BUG
    #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
            display:inline; //使浮动忽略,曾经就在这里出错,摸了半天后脑勺
    }

    4.另外加上一段IE6对PNG透明支持不好的JS解决代码
    function correctPNG()
       {
       for(var i=0; i<document.images.length; i++)
          {
         var img = document.images
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
            {
           var imgID = (img.id) ? “id=’” + img.id + “‘ “ : “”
           var imgClass = (img.className) ? “class=’” + img.className + “‘ “ : “”
           var imgTitle = (img.title) ? “title=’” + img.title + “‘ “ : “title=’” + img.alt + “‘ “
           var imgStyle = “display:inline-block;” + img.style.cssText
           if (img.align == “left”) imgStyle = “float:left;” + imgStyle
           if (img.align == “right”) imgStyle = “float:right;” + imgStyle
           if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle    
           var strNewHTML = “<span “ + imgID + imgClass + imgTitle
           + ” style=”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
            + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
           + “(src=’” + img.src + “‘, sizingMethod=’scale’);”></span>”
           img.outerHTML = strNewHTML
           i = i-1
            }
          }
       }
    function alphaBackgrounds(){
       var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, );
       var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
       for (i=0; i<document.all.length; i++){
          var bg = document.all.currentStyle.backgroundImage;
          if (bg){
             if (bg.match(/.png/i) != null){
                var mypng = bg.substring(5,bg.length-2);
       //alert(mypng);
                document.all.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+mypng+“‘, sizingMethod=’crop’)”;
                document.all.style.backgroundImage = “url(”)”;
       //alert(document.all.style.filter);
             }                                              
          }
       }
    }
    if (navigator.platform == “Win32” && navigator.appName == “Microsoft Internet Explorer” && window.attachEvent) {
    window.attachEvent(“onload”, correctPNG);
    window.attachEvent(“onload”, alphaBackgrounds);
    }

    5.只要记住IE7=*,IE6=_,然后按照先Firefox后IE7,最后IE6的顺序进行编写,一般就可以保证大部分用户浏览正常了。

  • IE5到IE8多版本共存调试浏览器

    http_imgload1

    基本上可以放弃以前装N个浏览器来调试的方案,IETester就能完全胜任,目前该软件还存在一些BG,不过不伤大雅,现在暂时支持IE5.5—>IE8beta1,已经很不错了,具体信息大家去官网看,强烈推荐给从事WEB设计的兄弟姐妹们!

    官方地址:
    http://www.my-debugbar.com/wiki/IETester/HomePage