按钮组件初步

先看一下bootstrap的按钮

Link  Button  

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

有什么区别呢？

看一下w3c里面强调的一句：

重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

我是有点晕，我参考了一些网站（豆瓣，trello，印象笔记，禅意花园...）表单里按钮用的都是input，但是苹果，苹果商店的登陆按钮是button，可以show一下：

这是追求极致？还是前端工程师一时糊涂没有遵照通用的方法？

我默认前者，因为这样子以来，在没有css情况下，苹果依旧是最好的通用性！可以看一下这个：

Input VS Button

下面是你正在使用的提交按钮标签：

1. <INPUT type='"submit"' value='"Submit"'>  

他们在不同的浏览器中的表现样式分别如下：

而我们使用<button>创建如上按钮时代码：

1. <BUTTON>Submit</BUTTON>   

他们表现样式如下：

      这些按钮和我们上面创建的按钮在运行和表现行为中没有任何区别。除了用他们来提交表单为，你还可以设置他们为不可用，添加快捷键或者设定一个tabindex等。还好，除了表现样式不同外，Safari都支持这些功能（和input的按钮相比，Safari中button按钮缺少表面的液态效果）。<button>标签最酷的功能就是我们可以在其内部放置一些有用的HTML元素，比如可以使用下面的代码加入图片：

1. <BUTTON><IMG style="_width: true" alt='""' src='""'> Submit</BUTTON>  

他们在浏览器的外观如下：

还不错哦。<button>元素就是为了解决这些表现上的差异。

所以封装前端css组件一定面对很多问题：

比如： 如何保证各浏览器下 <input>< button >< a > 定义的按钮尺寸一样？

①Firefox浏览器会默认设置input[type="button"]的行高为normal。如下：

button, input[type="reset"], input[type="button"], input[type="submit"] {
    line-height:normal !important;
}

把行高统一设置为normal，可以解决一部分问题。

.btn {
    line-height:normal;
}

②Firefox在私有属性里面额外设置了边框和留白，去掉即可。

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner { border:none; padding:0; }

现在Firefox也表现一致了。

③最后，再针对ie7以下的button和input[type=button]随着字变宽的问题做Hack。

.btn {
    *overflow:visible ;
}

所以我封装按钮的目标基本可以实现了hiahiahia。