分类: 设计

  • 10要点解决IE6兼容问题

    1、使用声明
    你必须经常在html网页头部放置一个声明,推荐使用严格的标准。例如

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http://www.w3.org/TR/html4/strict.dtd”>
    or, for XHTML:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

    最后你需要是ie6进入兼容模式,这已经足够兼容了。
    2、使用position: relative
    设置一个标签position: relative可以解决很多问题,特别是曾经有过看不见的经历或者奇怪布局的框架。明显的,你需要小心,绝对位置放置的子元素是否都参照找到新位置。
    3、为浮动元素使用display:inline
    浮动元素会有一个著名的ie6双边距margin bug。假如你设置了左边距5px但实际上得到了10px左边距。display:inline可以解决这个问题,尽管它不是必需的,但是css仍然有效。
    4、设置元素启动hasLayout
    大部分ie6(ie7)的渲染问题都可以通过起来元素的hasLayout属性来兼容。这是ie内置的设定,确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果,设置hasLayout也是必须的。
    5、修复重复字符的bug
    复杂的布局会触发一个bug:浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决的办法,部分是理想的,并且一些测试和出错是必须的。
    a、确保浮动元素都使用:display:inline;
    b、最后一个浮动元素使用margin-right:-3px;
    c、在浮动对象最后一个元素后使用一个条件注释。例如<!—>这里输入注释…<![endif]
    d、在容器内的最后使用一个div空标签(它也必须设置90%宽度甚至更小)
    6、使用a标签完成可点击和hover原理
    Ie6只支持a标签的css定义hover效果
    你可以使用它去控制javascript启动的widgets,使得他们仍然保持键盘操作。这里有个二择一的问题,但是a标签是所有解决方案中最可靠的。
    7、使用!important,或是高级选择符替代ie特定代码
    在外置的css文件里,放弃凭借传统的hacks和条件判断,使用有效的css代码去针对ie6仍然是有可能的。例如:最小高度可以使用一下定义。
    #element {
    min-height: 20em;
    height: auto !important; /* understood by all browsers */
    height: 20em; /* IE6 incorrectly uses this value /*
    }

    Ie6不支持“min-height”并且错误的将20em重写为“auto”。不过,当内容大于设置的空间时,它会增加它的尺寸。
    另外一个选择是使用高级选择符。例如

    #element {
    min-height: 20em;
    height: 20em;
    }

    8、避免百分比定义
    百分比在ie下比较混乱。除非你非常小心每个父元素的尺寸,这样就大概可以最后避免了。你仍然可以对其他浏览器使用!important来使用百分值。例如:
    body {
    margin: 2% 0 !important;
    margin: 20px 0; /* IE6 only */
    }

    9、早点和经常测试
    在你的网站和应用程序完成之前,不要放弃ie6的测试。问题将会更加严重并且需要很长时间去修复。如果你的网站可以运行于firefox和ie6,它将差不多肯定可以在其它浏览器下运行。
    10、重构你的代码
    经常的,修复会比重新考虑布局问题更加花费时间。Html细微的修改和更加简单的css经常是最有效的。这意味着你要放弃完美的合法的代码,但是将会更少的问题出现,并且你知道怎样处理将要出现的情况。
         /* ignored by IE6 */
    #element[id] {
    height: auto;
    }
    代码部分试了下语法着色,貌似有点乱了,这里是英文原文的链接:
    http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/

  • Machu Picchu Post [CG]

    先放上来吧,有机会再说怎么来的,来怎么的,来得怎么等等.

     

    主要目的就是让大家看看这段视频,因为是HD的载入可能比较慢,容忍容忍~
    为了对得起观众,再加点:
    This is the story of the unexpected meeting between a young peruvian boy living with his lama and a pilot from the airmail flying above the boy’s house.

  • 自定义WordPress的页面模板

    WordPress可个性化可塑性就不用说了,原本也是开源的
    测试了下,好像还不错.
    方法:
    在你的主题文件夹中创建一个新模板,命名为 tes.php (或者你喜欢的名字)
    然后把 page.php 中的内容拷贝到 tes.php 文件中。
    现在,你可以进行自定义页面了,如果你想页面中去掉边栏,去掉或者注释它 调用 sidebar 的地方即可,
    你可能需要找到 content div 标签,并手动给它增加一个 width 样式来扩展宽度以便能够占满整个 container div 标签。
    完成之后,到 tes.php 的最上面插入以下代码:

    /*
    Template Name: Tes
    */
    ?>
    当你完成添加代码之后,保存你的文件并上传到你服务器上的当前主题文件夹下。
    下面进入WP创建新页面,在右边,点击页面模板,在下拉列表中找到 Tes,选择它OK。


    这里是一个引用了自定义页面模板的页面效果(只去除了sidebar).

    那么进去看看