总结 CSS 调试样式时遇到的一些疑难杂症。

1. 多个input并列排列，如何消除中间的间隙？

1. 产生原因：

在coding代码时，input各个标签换行，在页面上以一个小的空格符呈现。

2. 解决方法：

   1. ++在coding时，各个input标签不要换行++；

   <input type="text" /><input type="text"/>
   

   2. ++使用float浮动，消除间隙++。

   <div id="wrap">
       <input type="text" id="one"/>
       <input type="text" id="two"/>
   </div>
   

   #wrap {
       width: 100%;
   }
   #one {
       width: 30%;
       float: left;
   }
   #two {
       width: 70%;
       float: left;
   }
   

2. 页面缩放时，input border会消失

1. 产生原因：

是由于在页面缩放时，会重新进行子像素计算

2. 解决办法

stactoverflow

i. ++使用关键字"thin"代替具体值"1px"++

input, textarea {
    border: 1px solid #aaa;
}

/* 使用如下代替之 */
input, textarea {
    border: thin solid #aaa;
}

3. 文字超出，显示省略号

1. 必须三个属性搭配使用

2. 解决办法

.cube-alias {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

4. 边框圆角，背景色溢出

1. 产生原因：

边框设置圆角之后，"切割"了一部分角落处边框, 但是背景色不能设置圆角，导致背景色溢出

2. 解决办法

/* 在设置圆角边框处，将溢出的背景色隐藏 */ 
#totalsDiv .ibox {
    border: 1px solid #ccc;
    margin: 5px 0;
    border-radius: 5px;
    position: relative;
    overflow: hidden; /* 问题解决关键 */ 
}

5. checkbox，radio 与文字垂直对齐

1. 产生原因：

checkbox与文字的垂直居中默认是基线对齐

2. 解决办法：

input[type="checkbox"],
span {
    vertical-align: middle;
}