xhtml和css在前端世界里可能是最基础的两门语言，但是有些东西并非我们想象的那么简单，就和生活中一样，越简单的东西越容易忽略。以下是我近来碰的问题，在此稍作总结：

第一：你了解textarea的resize属性吗？

文本区域textarea，在浏览器FireFox、Chrome、Safari下会在右下角有个拖拽的三角，这就是所谓的属性resize属性，它允许用户自由拖拽，以获得更多书写内容空间。但这会影响页面外观，造成不好的用户体验，于是，很多时候我们在制作页面时，我们直接resize :none 从而禁止了它。

resize主要有以下几个属性：

both：可以调节textarea元素的宽和高；
horizontal：只能可以调节textarea元素的宽；
vertical：只能可以调节textarea元素高；
none：不能可以调节textarea元素的尺寸；

第二：absolute元素如何“智能”应对窗口缩放？

这问题看得有点摸不着头脑。这种问题一般出现在小显示器上，在大显示器下，我们缩小窗口高度时，会导致下面的定位元素覆盖同父级的一些非定位元素，好吧，我承认我讲的有点乱。还是来看示意图吧。

上图中微博登陆层覆盖了普通登陆层，为什么会出现这种情况呢？因为绝对定位元素的bottom值是相对于与父级元素的高度来定的，在样式中，我们设置父级元素的高度为100%，当窗口高度减少时，父级元素高度不断减少，定位元素自然会跟着上升，最后出现覆盖“登陆层”的情况。

那么如何解决？试想如果给父级设置一个min-height，则当缩放窗口高度变小时，父级元素的高度减到min-height时就不再减小，定位元素就会固定在bottom处了，问题就得到解决，如下图：

第三：如何更改 <input type="file"/> 默认显示样式？

更改 <input type="file"/> 的显示样式，开什么玩笑？这东西的外貌就和select一样天性难改，而且在各个浏览器也显示不一样，重置样式就免谈了。可是我们可爱的设计师们并不会理会这些，然后设计一个漂亮的按钮用作上传文件，通过审核后直接扔了过来，接下来，好吧，把痛苦留给我！

<input type="file"/> 在各大浏览器的默认样式：

firefox下：

Chrome下：

Opera下：

由上面的图可以看到，<input type="file"/> 令我们头疼的不仅是改变不了它的天生外观，而且在各个浏览器还形态多变， 好嘛，反正不一样，正好一起解决。但是如何解决呢？还好这个世界上有模拟这个东西，话说当初计算机就是模拟人体的结构来完成的，而程序语言则是模拟人的思想，扯远了。我们是这样想的，尝试改变 <input type="file"/> 外观这条路是行不通的，于是直接把它变为不可见（做法是将其透明度设为0），然后再在它外面套一个div，改变此div的属性(通常是加背景)。这样的话，我们看到的页面，既有设计师漂亮的界面，也有 <input type="file"/> 的上传功能。

.box{width:100px;height:30px;overflow:hidden;line-height:30px;font-size:12px;text-align:center;background:green;color:#fff;border-radius:5px;position:relative;}
.box .val{position:absolute;display:block;width:100%;height:100%;}
.box .upload{width:100%;height:100%;overflow:hidden;opacity:0;filter:alpha(opacity=0);font-size:100px;border:none;}

<div class=”box”>
    <span class=”val”>上传吧！</span>　
    <input type=”file” value=”上传吧！” class=”upload”/>
</div>

下图为改造的上传input：

注意点：在css中我们把 <input type="file"/> 加入font-size:100px，这是为了防止用户点不到上传按钮的情况。