最近公司项目中遇到了一些以前不怎么熟悉的问题和一些莫名其妙的问题

整理出来，以备不时之需

1.
/* 溢出隐藏 */
overflow :hidden;
text-overflow: ellipsis ;              /*clip是简单的裁切，ellipsis以省略号显示*/
white-space :nowrap;                /*控制内容不换行*/

2./*ie6下的层背景滤镜问题(ie6下不显示，其他都显示,把height改成固定高度之后才显示)*/
.black_overlay{
               display: none;
               position: absolute;
              top: 0%;
               left: 0%;
               width: 100%;
               height: 100%;
               background-color: #cccccc;
               z-index:1001;
               -moz-opacity: 0.8;              
               opacity: 0 80;
               filter: alpha(opacity=80);    
               -khtml-opacity: 0.8;
               opacity: 0.8;
        }

这个东西源于一个弹出层的demo，最后测试时候发现的这个问题

3./* FF下父标签使用float属性，子标签再使用float属性，例如都是float:left;会显示错误，IE是好的 */

<div id="father" style="float:left;">
  <div id="son" style="float:left;">
 
  </div>
</div>

4.

/* 两列，左列固定宽度，右列自适应，网上的教程都是左列浮动，右列100%宽，但是这样在firefox下会右边覆盖左边 */

解决方案一：使用YUI的grid布局模式
解决方案二：
   <div style="width:100px; float:left; background-color:#CCCC00">eed</div>
   <div style="margin-left:100px;background-color:#eeeeee">
   <div class="abs">
      <div class="abs">aaa</div>
       bbb
   </div>
   </div>
解决方案二,我是第一次使用并且成功用于我们公司的后台管理系统中,很多后台的项目都可以采用这种布局。

5.<a class="clear"></a>
该写法会导致产生莫名的layout空间,是之前的那哥们创造出来的，令我浪费了一上午的时间。这东西我不知道写法上是否存在错误，但是显示上绝对有问题，我自己写的语义的时候是不会想出来的.

6./*关于DIV 与<ul>和<li>混合嵌套问题*/
IE:如果<li></li>
       <div></div>顺序写下去，<li>会把<div>当成li的子标签
FF:显示正常     
这个大家可以验证一下，很有意思的问题

7.
/*在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。
*/
代码如下：
<div style="width:200px;border:1px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

详细解决方案：http://www.cnblogs.com/yizuierguo/archive/2009/05/17/1458948.html

8.
/*FF下容器高度*/
 FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
9。
/*ie7的莫名其妙多出来字的问题*/

问题描述 <li class="pay">
                  <a href="#" class="p1">&nbsp;充值</a>
                  <a href="#" class="p2">&nbsp;支付宝</a>
                  <a href="#" class="p3">&nbsp;快钱</a>
                  <a href="#" class="p4">&nbsp;餐到付款</a>
         </li>

测试时在IE7中"餐到付款"变成了"餐到付款付款",莫名其妙的多出来几个字，困扰了好久，最后发现是一个样式重叠问题
原因：样式重叠 , 之前的哥们设置了样式，[插一句：我还是比较烦整个项目利用一张背景图，在CSS开始的时候指定background属性，后期维护和扩展十分不变，这个东西我会在另外一篇文章中说明,别以为taobao 是这么做的你也跟着学!汗！]

感悟:CSS开发中的问题，真的是什么样的都有,有的真的是让你丈二和尚------摸不着头脑,不过有一个好处，那就是帮助你提高，我现在很喜欢去钻研CSS的问题。其实有些莫名其妙的问题是完全可以避免的，一个字：html语义化，不要自己搞发明创造就像<a class="clear"></a>这么酷的。   越来越感觉到html语义化的重要性。

10./*关于按钮(button)的背景图片问题*/
    1.value的背景不需要定义display:block；
    2.如果开始制定全局的background属性，如果再使用别的背景属性，要先使用background:none;删除原属性(这个问题困扰我很久)

3.a的背景图要指定宽度和高度和display:block;属性.

以上问题都是我加入新公司开发中遇到的问题,我不保证其完全正确，但是欢迎热爱前端的朋友和我一起交流!