box-sizing:border-box;的一些坑

近日在使用新属性box-sizing:border-box;的时候遇到了一些问题很致命，很费时间，情况就如下面的例子。给全局加了box-sizing:border-box;属性。文字里需要带入彩色的标签，高度是16px,左右padding各5px，line-height自然而然就是16了。但这时就会出现图一的情况文字上下并不是剧中的。从正常逻辑思维出发，我找不到一丝纰漏怎么改也不对怎么给都是剧中不了。只有不按常规，高度是16，行高给14这样才好看一点了。算是暂时应付上线。

属性虽好用，但有时候会将你带入坑中无法自拔。迷迷糊糊在项目中解决了问题单一直不知道原因出在哪里。现在回想起来有按着当时的情景重敲了一遍忽然就想明白了。正常思维，按W3C标准盒模型是content，padding，border，margin。而使用了box-sizing:border-box;后盒模型就乱了套。padding和border就会被算在实际宽高中。所以我的高度16中还包含有上下边框2px。这样就只能给高度16px；line-height：14;或者是将高度改为18px；line-height:16px。问题就得以解决了。

详情