面试必备：文本框与按钮的最简组合

在家修养了大半年，终于要开始找工作了！因为身体的原因，想着还是在这个小市区找吧，毕竟离家里人近一点。看了一下本地的论坛与招聘网站，大概也就两三家招前端，要么是设计切图一起做，要么是切图，对于javascript的要求基本没有。尽管如此，我还是抱着散心的目的，去了其中一家面试。

百度上找到地理位置，记在我的笔记簿上，加上一个两百块的诺基亚就出发了。我知道我很LOW...我那个装着evernote、百度地图的“智能”手机已经被我爸拿走了，现在我爸是低头族。地理位置离医院倒是不远，每次去医院都会经过那条路，然而现实往往是不理想的。按着门牌号，我要去352号，可是经过350号以后，街对面已经是380多号了，再往前走就是400+了，最终还是问路人才顺利到达。

公司挺小的，上班的一共才6个人，网上看到公司简介的时候，是有十几个人的，也许都休假了吧，毕竟今天是周末 - -。老板大概三十来岁，娃娃脸，格子衬衫加深色牛仔裤，给了我一张简历单填写。单子内容比起广州那边的可少多了，没有地方要填写家人的电话、职业，也没有要填写上一个公司的上司和电话号码。我唯一的抱怨就是，在教育经历和工作经历中填写公司名字和学校名字的单元格还没有一个填年月日的单元格宽。。。

填好以后，就直接开始聊了，老板一边聊一边看简历内容。我大概说了我以前做些什么、用哪些技术、有那些能力之类的，然而并没有什么卵用，“我们这个呢，通常都是希望面试者可以现场做一些东西来看看水平的，不知道你愿不愿意呢？"老板直接略过我的自我简介问道。我个人是不喜欢做这个的，如果是几个考题的话，倒是挺有兴趣，但是我没有拒绝，老老实实等着他发PS稿件给我。

大概PSD稿件结构是这样的：

要求：IE7+以及其他主流浏览器（桌面端）

考虑：要做SEO、要减少HTTP请求、图片优化、要有HMTL5推荐的标签语义化、CSS与HTML的合理组合（比如模块化CSS），需要多级导航与选项卡。

很遗憾，两个小时后我并没有完成。囧rz

老实说，太久没去碰IE的低端浏览器兼容性的东西，让我在有写搜索功能块的时候遇到了一点小问题：修改搜索框的边框样式与搜索按钮的边框样式以及背景色，我以为它们可能仅仅会出现一点默认边距或者内填充然后一个hack就OK了。我too young too simple：

好吧！我看我还是老老实实找个reset.css吧！结果依然不会好，最终我用了position去解决的~~~~回来自己好好找了一下原因，写了下面这个简单版（仅在以上四个环境测试过）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*文本框默认使用盒模型content-box，按钮使用border-box*/
        /*文本框默认有上下padding:1px，所以高度实际是26+2*2+2*1=32px，直接给Btn*/
        /*文本框中的line-height大于高度会发生滚动，为了文本垂直居中请不要超过高度*/
        /*line-height还有其他问题不在此展开*/
        /*文本框在不同浏览器中有默认的左右内填充padding，此处统一设置*/
        /*文本框不加vertical在火狐中不能对齐按钮*/
        .inputSearch {
            border: 2px solid #f08;
            height:26px;
            line-height: 26px;
            width:200px;
            padding-left: 2px;
            padding-right: 2px;
            vertical-align: bottom;
        }
        .inputButton {
            background-color: #f08;
            border: 2px solid #f08;
            height:32px;            
            width:80px;
            font-size:16px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <section>
        <form method="post" action="search.php">
        <input type="text" class="inputSearch" placeholder="please!" /><input type="button" value="search" class="inputButton"/>
        </form>
    </section>
</body>
</html>

对里面的搜索按钮与文本框为什么要设置这些参数我已经给了详细说明，面试写这个可能用得着，实际项目中的这个搜索功能还可能会有搜索提示、文本框内增加特殊的图形作为搜索扩展、搜索切换、关键字等。

最近在学设计模式，组合模式已经学完了，可是要把组合模式、策略模式以及观察者模式在前端实现MVC倒是让我头疼不少，囧rz！~~~

面试必备：文本框与按钮的最简组合

推荐阅读