css容易发生错误或混淆的探索笔记

〇、不清除浮动，FF可能会有背景被隐藏，而IE更多的是使你设置的padding、margin没有作用，达不到想要的效果。

一、
    1、不要让CSS有过多的标记
    2、最好不要在类属性里面去加入颜色或者长宽的尺寸
    3、1）一个标签或者属性就算只有一点点的跟表现搭上，都不要使用。那是CSS的事。并且CSS做得更好。
         2）把标签使用在如它的名字所暗示的用途上。表格标签是用在表格式数据上的。标题标签是用在标题上的。等等。
         3）特定的内容用恰当的标签。列表用list，标题用hx(x = 1 - 7)等等。

 

二、
    1、空白边叠加——只有普通文档流中的垂直空白边才会发生空白边叠加；行内框、浮动框活绝对定位框之间的空白边不会叠加。
       ①当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加。
       ②当一个元素包含在另一个元素中时（假设没有填充或边框将空白分隔开），他们的顶和/或底空白边也发生叠加。
       ③空白边甚至可以与本身发生叠加。假设有一个空元素，它有空白边，但是没有边框或填充。这种情况下，顶空白边与底空白边就碰到一起，他们会发生叠加。如果这个空白边碰到另一个元素的空白边，它还会发生叠加。
    2、块级元素从上到下一个个排列；
         行内元素在一行中水平布置。可以使用水平填充、边框和空白边调整他们的水平间距，但这些设置不能改变行内框的高度，改变这种元素框的高度只能通过设置行高来改变。
    3、相对于相对定位的祖先元素对框进行绝对定位，这在大多数现代浏览器中实习的都很好。但在IE5.5 和IE 6中有一个bug。如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。如果没有，那么IE会相对于画布定位这个框。最简单的解决方案是为相对定位的框设置宽度和高度。
    4、浮动元素脱离了文档流，不影响周围的元素。但是，对元素进行清理实际上为前面的浮动元素留出了垂直空间。

三、
    1、如果使用像素设置背景位置，那么图像左上角的距离为指定的像素数。但是，使用百分数进行背景定位的工作方式不太一样。百分数定位并不对背景图像的左上角进行定位，而是使用图像上的一个对应点。所以，如果指定垂直和水平位置都是20%，那么实际上将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。
    2、并不是所有浏览器都支持背景图像动画，但是不支持这个特性的浏览器常常会显示动画的第一帧。

四、
    1、IE不知道为什么会在列表项上下添加额外的空间。可以为列表项添加属性display:inline;来修复这个bug。
    2、对于远距离翻转，IE会不太正常。IE在使用:hover动态伪类寻找锚链接中的嵌套元素方面似乎有问题。但是，有一个简单的（但有点奇怪的）解决方案。添加a:hover{border:none;}规则到锚的鼠标停留状态上就能够修复IE中的错误。

五、
    1、div居中可以在设置宽度后，用margin:0 auto;来让元素居中，但怪异模式中的IE5.x和IE6不支持自动空白边。幸运的是，IE将text-align:center;误解为让所有东西居中，而不只是文本。可以向下面这样设置：
        body{text-align:center;}
        #wrap{width:950px;margin:0 auto;text-align:left;}
        在Netscape 6中，当浏览器窗口的宽度减少到小于容器的宽度时，容器的左边会跑到屏幕的外边，就无法访问它了。为了防止这种现象，需要将主体元素的最小宽度设置为等于或略大于容器元素的宽度：body{text-align:center;min-width:760px;}
        居中还可以用定位50%，然后设置负值空白边使层居中。
    2、典型的两列布局时，#left和#content，为了使内容不紧贴边，可以设置padding。但水平padding会调用IE 5.x专有的框模型。为了避免这种情况，将水平填充添加到导航区域的内容上。
    3、布局三种方式：固定宽度、流体布局（宽度设置为百分比，以适应不同分辨率）、弹性布局（以em为单位设置宽度，适应不同字体大小）
        弹性-流体混合布局，以em设置宽度，然后用百分数设置最大宽度（max-width）。这种布局将随着字号伸缩，但决不会超过窗口的宽度。但这样布局的网页，上面的图像伸缩也是一个问题。跨越大区域的图像，可以将其设置为背景图像，随元素伸缩而显示不同。作为页面上的图像元素，可以设置百分数宽高，但要注意设置最大宽高，以免失真。
        固定宽度布局的网页非常容易应用大背景，但其他方式的布局就要考虑用百分数定位背景了。

六、
    1、作为一种语言，CSS设计成具有很强的向前兼容性。如果浏览器不理解某个选择器，那么它会忽略整个规则。同样，如果它不理解某个属性或值，它就会忽略整个声明。
        CSS过滤器和招数是不同的。前者过滤不同浏览器，后者主要是解决特定的浏览器bug。
    2、最安全的过滤器依赖于未实现的CSS，而不是浏览器bug。
          ①子选择器（IE6不支持）html>body{}，为了让这种过滤器起作用，必须确保在子选择器前后没有空格。
          ②属性选择器（IE6不支持）div[id="content"]{}
          ③星号HTML招数（只有IE6和更低版本认识）* html{}，它提供了一种相当可靠的指定IE 6和更低版本的方法。
         HTML元素被认为是网页上的第一个元素（即根元素），但是，IE的所有当前版本有一个匿名的根元素。可以使用通用选择器指定包围在另一个元素中的HTML元素。星标记只有IE认识。
    3、IE/Mac注释反斜线招数
        Mac上的IE 5错误地允许在注释内部进行转义，这个过滤器的工作方法是在结束注释字符串前面添加一个反斜线。其他所有浏览器都会忽略这个转义，并且应用后面的规则。但是，IT 5/Mac会认为注释仍然没有结束，因此会把下一个结束注释字符串前面的所有字符都忽略。
        /* Hiding from IE5/Mac \*/
        #nav a{width:5px;}
        /* End Hack */
    4、转义属性招数
        该过滤器要在属性中添加一个转义字符。所有现代浏览器都应该不会忽略这个转义字符，但是，IE 5.x/Win认为这是
属性名的一部分，并且不认识这个属性，所以忽略这个声明：
        #content{w\idth:100px}
     因此，转义属性过滤器提供了一种对IE 5.x/Win隐藏样式的简单方法。但是，在使用这种过滤器时要小心，因为反斜线字符不能出现在数字0～9或字母a~f（或A~F）前面。这是因为在十六进制表示法中要使用这些值，因此可能被转义。  
    5、下划线招数与!important招数相似，在属性前面放一个下划线，符合标准的浏览器就不再认识这个属性并且忽略这个声明，但是IE 6和更低版本会忽略下划线，因此应用这个规则，覆盖前面的规则。

七、
    1、空白边问题是由于具有块级子元素的元素计算其高度的方式造成的：如果元素没有垂直边框或填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。

八、
    1、在XHTML中，div的次序是主列、次要列、边栏。而在应用了样式的页面中，次序应该是边栏、主列、次要列。通过在css中扩大主列左侧边距，同时设置边栏左侧边距为相应的负值即可。
    2、用javascript实现透明的定制角和边框，参见Roger的教程：http://www.456bereastreet.com/archive/200506/customising_custom_corners_and_borders/
    3、对于较大的图像，设置display:block;float:none;并没有清除浮动，可以使它单独占一列。若没有display:block;下面的浮动元素仍有可能排列混乱。

九、
    1、如果用户重新设置尺寸，可以假设大多数人都会加大文本而不是减小。
    2、为了使两列或者更多的列（有不同色背景）看起来是对齐的，可以用faux列解决。这种方法是用一个大的背景在列的父级元素上进行纵向平铺，显示出对齐的伪列。
    3、如果有两列，用流体布局水平排列。流体布局的关键是宽度会根据浏览器的宽度扩展和收缩。为了实现这种效果，使用百分数值替代px或em(如各50%)。但是，这里有个问题。IE在计算浮动相邻元素的误差方面有问题。对两个设置为50％的浮动div的计算是错误的，使它们比容器宽，所以IE会将它们垂直排列。但是，不必担心——只需将第二个div的宽度改为49.9%即可。
    4、使用z-index属性，要注意相对性，因为堆放次序只决定一个父元素中的子元素的相对次序。如果在其他父元素中使用z-index，那么这是整个页面的堆放次序问题。
    5、在用图像替换技术时，最好用Phark图像替换方法，即用text-indent:-9000px;方式隐藏文本。
    6、设置超链接背景图像时，注意在IE中常常发生的当用户鼠标经过时发生闪烁。

十、
    1、id可以使用任何命名。"Gladys" 和 "orangebox"都完全符合 XHTML 的命名规则。但是语义的 (semantic) 或者元结构化 (meta-structural) 的命名是最好的（即能够解释其中元素所执行功能的命名）。
          当客户决定使用蓝色时，你会觉得将站点某部分命名为 orangebox（橙色框）会非常地傻。下面的这种情况中，会觉得自己更傻，当距离最后交付只有六个月时，你开始调校样式表，却怎么也想不起来 "Gladys"到底代表导航区、侧栏还是搜索框。
    2、id 值必须以字母或者下划线开始；不能以数字开始。虽然 W3C 验证不会捕获这个错误，但是 XML 解析器会的。同时，如果你将 id 与 JavaScript 在表单中配合使用，那么 id 名称和值必须是合法的 JavaScript 变量。空格和连字号，特别是连字号，是不被允许的。不仅如此，将下划线用于 class 或者 id 名都不是个好主意，这是由于在 CSS2.0（以及某些浏览器）中的限制。
    3、元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
    4、由于浮动元素脱离了文档流，所以包围浮动元素而没有进行清理的 div 不占据空间。解决方法有二：
                  a、添加一个空元素，定义它的css属性为clear:both;
                  b、将这个父级元素设为浮动。（但这样会给后面元素带来影响）
    注：若要IE（包括IE 7）按标准方式处理一个块级元素浮动而它下面的块级元素不浮动，不能指定第二个元素的宽和高。

 

/*===========================================*/

这些笔记都是看《精通CSS 高级Web标准方案》（人民邮电出版社 ISBN:7-115-15316-7）时写的，当然还参考其他人发表的很多优秀文档。无论如何，大量的实践才能真正用好CSS。现在还得继续努力……>