一个让以各种类型元素为容器的“按钮”都文字居中的方法
? ? 最近在做一个Button控件，这个控件不仅限于使用<button>标签做容器，还允许使用<span><div>设置<h1>这样的标签。但是，对容器类型的大容忍度的代价就是要协调好这些容器在不同浏览器下的不同表现。下面总结下需要处理的兼容问题：
? ? 1. <= IE7版本的浏览器，不支持box-sizing属性的设置，且，button的box-sizing展示效果是border-box，而其余类型元素的是content-box；
? ?
? ? 2. border-box展示的元素，要让文字居中，要满足下面的等式 ：
? ?
? ? lineHeight = height -?borderTopWidth -?borderBottomWidth
? ?
? ? 3. IE8浏览器下，如果是纯汉字文字，即便你使用上面的方法做了居中兼容，文字也会向上飘；
?
? ? 知道了这三点，解决它们，目标也就达成了。
?
? ??问题1和2： 考虑IE7的低占有率，我考虑将IE7浏览器下的表现兼容统一成其他浏览器，即如果使用<button>做容器，并设置了height（这个是包含了border的），那我会把这个height加上border的宽度，使得它的表现看起来是content-box的。
?
? ? 问题3： 这个处理要个小窍门，既然纯汉字会飘上，那么我们就增加一个非汉字的字符，并把它隐藏起来。增加下面一段css：
?
function setHeight(dom, height) { dom.style.height = height+ 'px'; var lineHeight = value; dom.style.lineHeight = lineHeight + 'px'; // offsetHeight是元素包含了border和内容后的总高度 var offsetHeight = dom.offsetHeight; // 说明是border-box模式 if (offsetHeight === height) { // 那么我需要把它调整成content-box var borderInfo = getBorderInfo(dom); height = height + borderInfo.borderTop + borderInfo.borderBottom; dom.style.height = height + 'px'; }}?
? ? 好了，这样就行了。当然，我这里没有考虑padding（因为我没设置。。。），不过如果有这个需要，其实也就是在加加减减的时候把padding算上而已。
?
?
?
?
?