内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
15 Mar.2009

css默认样式+css压缩 夜晚

作者: 我就是个世界   分类:技术&学习 » DIV+CSS   出处:gracecode            | |
css默认样式:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse; border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}


CSS压缩

http://www.osxcn.com/csstidy/?lang=zh-cn
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cleancss.com/

转载:CSS 在 Explorer6 下调试 CSS(草译)

原文连接在这里,主要介绍原作者的针对 Explorer6 调试 CSS 的一些经验。不过在我个人看来,这也是一般性的 CSS 调试方法。

防患于未然

坦白的讲,我每天都会话很多时间用于调试 Explorer6 的 CSS 问题上。下面是一些小 Tips 可以确保 Explorer6 最大限度的返回你期望的效果。不幸的是,并不是每个人都知道它们(译注:作者有些“危言耸听”)。

重置默认样式

重置默认样式可以最大限度的避免浏览器差异,最简单的样式重置通常可以这样写

* {
    margin: 0;
    padding: 0;
}


如果你觉得这样“太过于简单”,可以参考 YUI ResetEric Meyer's Reset

不要在同一元素上同时声明 margin/padding 的宽度

由于 Explorer6 糟糕的盒模型,,你必须要万分小心。如果你需要将一元素设置了宽度,注意避免再将其上设定margin、padding(左边或者右边)。我会在其上再包裹一层元素,比如
<p>、<ul>、<table>、<hr>
这样的标签。

在大多数情况下,设计师会统一同一种元素的样式,比如段落的内间距(padding)统一为 8px 到 20px(通常为 10px)

p {
    padding: 0 10px;
}


这是个非常好的定义。

另外:我一直使用像素(pixels)作为 margin 和 padding 的单位,因为如果使用 em,那么可能在使用不同的字体造成不同的宽度差异。

校验 XHTML、HTML

我已经好几次遇到这样的问题,在 Firefox 和 Safari 显示完好的页面,却在 Explorer6 下显得惨不忍睹。如果 Explorer7 也出现了这样的问题,那可能是遗失了“<”或者“>”之故。为了些可预见性的问题,其他浏览器都会注意这个问题,唯独 Explorer 。

我经常使用 Firefox 的 HTML validator 插件验证页面代码。

保持清除浮动

总会有页面要将某个元素浮动起来,如果是定宽的那么还好办。如果是不定宽度的,那么要清除下浮动 -- 毕竟其他元素不一定都是浮动的。总之,时刻记得清除浮动是个好的习惯(译注:也可以参看我以前的文章)。

调试的技巧

虽然有多年针对 Explorer6 的 CSS 调试经验,一些常见的问题我知道如何去解决,但真的碰到很头痛的问题时,那时我通常会这样解决

打开电脑,载入 Explorer6 (译注:废话 -_-!)

确保安装了 IE Accessibility 工具条

点击工具条上的“编辑 CSS”

然后我开始“变魔术”

寻找错误

设定背景色

我经常会在指定的大块元素上设定个背景色

#content {
    background-color: red;
}
#sidebar {
    background-color:blue;
}


这能让我知道是哪块元素出了问题(译注:我喜欢用“red”高亮,因为好打而且显眼)。

隐藏元素

然后开始逐级的隐藏该块元素中的内容,首先是最大的块

#sidebar {
   display: none;
}


如果问题消失了,那么再逐级在块中寻找出问题的元素,比如

#sidebar .sub-item {
    display: none;
}


或者

#sidebar .sub-item .sub-sub-item {
    display: none;
}


使用这一方法,通常就能精确的定位哪个元素造成的问题(按照经验通常是
<div>
或者是
<p>
)。

寻找解决方案

Explorer6 是头“烈马”,它会按照自己的规则去渲染 CSS 。当找到对应的元素后,下面有些经验式的解决方案可以参考一下(保持原作、顺便偷懒就不翻译了)

#sidebar .sub-item .sub-subitem {
    /* try setting this if it’s not already set - it sometimes works wonders */
    position: relative;

    /* display: inline often fixes the double margin float bug and */
    display: inline;
            
    /* Sometimes this just fixes problems - no idea why */
    display: inline-block;

    /* margin can be a killer so take it off completely see if the problem goes away */
    margin: 0;

    /* same as margin */
    padding: 0;

    /* Sometimes IE6 hates background colours not being declared */
    background-color: transparent;

    /* can sometimes stop columns too wide from breaking a layout */
    overflow: hidden;

    /* Sometimes forces hasLayout and fixes things */
    zoom: 1;
}


我经常会碰到改变它的 margin 和 display 就能解决问题。然后我会使用 Google 搜索网上是否有相应的 Bug 记录。

解决问题

当我找到解决该问题的办法以后,通常我会将其放到名为 ie6.css 文件中,然后只让 Explorer6 载入该 CSS 。当然,要确定该样式会覆盖原先定义的样式。

译注:当然也可以使用 CSS Hacks,但不推荐这样做,原因之一是要“保持 CSS 简单”。

分享到QQ空间
最后编辑: 我就是个世界 编辑于March 15, 2009 23:34
时间:23:15 评论(0) 引用(0) 阅读(3354) Tags: , ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情