解决Button在IE6、7下的自适应宽度问题
Posted on | 二月 24, 2012 | 2 Comments
很早就遇到过这么个小问题，但由于其并未影响到实际作用和美观就没有正面解决它，现在，我们来试着解决它。
写一个Button，有两种方式：其一，直接button标签；其二，input type=”button”。
不管哪种方式，Button的宽度在IE6、7下总是不能完美，接下来我们演示一个普通的Button，你可以用IE6或者IE7浏览器看看其显示宽度，然后对比Chrome或者IE8等浏览器，你会发现Bug的所在。
1、一个普通的Button:
可以很直接的看到Button的两边有空隙，当然，这个空隙是无法用padding:0来解决的。
通常，不少同学会想到给该Button定义一个width:100px。
2、width:150px的Button：
.demo-button01{width:150px;}
恭喜，你是对的。但是，我们必须这个Button自适应宽度呢？
好吧，加个width:auto试试。
3、width:auto的Button：
.demo-button02{width:auto;}
哦也，还是不行！下面试试网上提供的一种方法。
4、width:auto;overflow:visible;的Button：
.demo-button03{width:auto;overflow:visible;}
Yes，可行！还有一个方法如下：
.demo-button04{width:1;overflow:visible;}
但个人觉得width:1的写法很二，所以摒弃之。
结语：
如果你要问问什么IE6、7下会出现这样的问题，我说是微软很二。解决Button自适应宽度的最佳办法是width:auto;overflow:visible;
参考资料：http://jehiah.cz/a/button-width-in-ie
转载请注明：大前端 » 解决Button在IE6、7下的自适应宽度问题
15 个 JavaScript Web UI 库
Posted on | 九月 14, 2011 | 64 Comments
几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架，这些 UI 库与框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。本文介绍了 15 个非常强大的 JavaScript Web UI 库，非常适合各种各种规模的富 Web 应用的开发。
LivePipe
LivePipe UI 基于 Prototype Javascript 框架，包含了一整套经严格 测试并高度可扩展的 UI 控件，拥有很好的文档，在不支持 JavaScript 的环境中，可以无缝降级使用。包括 Tab, 窗体，文本框，多选框，评分控件，进度条，滚动条，右键菜单等多种控件。
Read more
CSS3视频详解新增属性及相关用法
Posted on | 九月 14, 2011 | 5 Comments
在CSS3 info上看到这篇文章，很有用，拿来分享给各位国内的同学。
这是一份近乎完整的CSS3新增属性教学，视频是作者手把手教你如何使用CSS3这把利器。希望看完这些视频教学后你的CSS3水平有相当的提高。另外，如果你还有CSS3方面不懂得额地方，可以参看大前端的CSS3详解，希望对你有帮助。
Borders
- Border Radius: Part 1 (5:46)
- Border Radius: Part 2 (6:01)
- Border Image: Part 1 (6:13)
- Border Image: Part 2 (4:25)
- Basic Box Shadows (5:52)
- Advanced Box Shadows (5:19)
- Read more