常见细节处理bug

（1）：处理img的相关问题

需求1：处理img的和文字对齐方式

使得img和文字对齐方式为居中，不会使得img出现底下留白
 img{
 vertical-align: middle;
 }
 
 需求2：图片有边框BUG
 当图片加<a href=“#”></a>在IE上会出现边框
Hack:给图片加border:0;或者border:0    none;

需求3：图片间隙
div中的图片间隙BUG
描述：在div中插入图片时，图片会将div下方撑大大约三像素。
hack1:将</div>与<img>写在一行上；
hack2:将<img>转为块状元素，给<img>添加声明：display:block;

（2）：处理inout表单点击时候，边框蓝色高亮的问题

    input {
      outline: none;
      /* border: none; */
    }

（3）：禁止文本域缩放

textarea{
	resize:none;
}

（4）：表单中文本框和按钮高度不一致

原因：是button的边框是在里面的，而文本框的边框是在外面的
解决方法1：就是给button这个边框外面添加一个盒子，并且添加边框，里面的button则需要去掉边框

  <form action="">
    <input type="text" class="search">
    <div class="btn_box">
      <input type="button" value="" class="btn">
    </div>
  </form>

    form {
      width: 250px;
      height: 30px;
    }

    form .search {
      float: left;
      border: 1px solid red;
      border-right: none;
      height: 28px;
      width: 218px;
    }

    form .btn_box {
      float: left;
      border: 1px solid #ccc;
      border-left: none;
      height: 28px;
      width: 30px;
    }

    form .btn {
      height: 28px;
      border: none;
    }

解决方法2：就是给外面添加一个边框（form），并且针对每一个都是怪异盒模型，都去掉了input和button的边框去掉，form宽252px,高30px

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    form {
      width: 252px;
      height: 30px;
      border: 1px solid #ccc;
    }
        form .search {
      float: left;
      height: 28px;
      width: 218px;
      border: none;
      background: yellow;
    }

    form .btn {
      float: left;
      height: 28px;
      width: 30px;
      border: none;
      background: red;
    }
    
  <form action="">
    <input type="text" class="search">
    <input type="button" value="" class="btn">
  </form>

（5）：表单提交的时候，控制台闪动一下，不输出结果

点击后闪动，这是提交后直接刷新，因此控制台来不及打印就直接被刷新了，
解决方法：注释掉form标签，在与后台相连接时候，再把注释解开即可

按照价格查询商品：- 搜索
按照商品名称查询： 查询

（6）：双倍浮向（双倍边距）（只有IE6出现）

描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;

（7）：默认高度

默认高度（IE6、IE7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;

（8）：鼠标指针bug

描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:    如统一某元素鼠标指针形状为手型，
应添加声明：cursor:pointer

cursor:         ;
auto默认
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形

（9）：透明属性

兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
	例：opacity:0.5;)
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)

（10）：过滤器

 1.下划线属性过滤器
  当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
  
  语法：选择符{_属性：属性值；}
 

  2. !important关键字过滤器
  
  它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，
我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。

  语法：选择符{属性：属性值!important;}
 

  3. *属性过滤器

  当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属
性的作用。

 语法：选择符{*属性：属性值；}


  4.   \9  ：IE版本识别；其它浏览器都不识别
语法：选择符{属性：属性值\9;}

  5.   \0  :   IE8 及以上版本识别；其它浏览器都不识别