experience

文章目录

1. 1. 1. input中设置cursor：pointer无效
2. 2. 2. 编辑内容使用contenteditable=”true”

这篇主要是讲一下在开发中遇到的一些有趣的解决办法，以及一些技巧。

1. input中设置cursor：pointer无效

背景是当我要实现一个上传封面功能时，我把input标签放在上层，a标签放在下层，这时我想优化一下交互效果，当鼠标移到input上时变成手型，但是事实怎么这样做失效了，所以经过查阅资料，最终加上font-size:0;,问题解决。
font-size:0;在解决相邻的display:inline-block;元素之间存在的默认间隙也是十分有用。
例如，有很多人抱怨为什么我将两个a标签设置成display:inline-block;width：50%，而最终他们不是在同一行中，第二个a标签被挤到下一行，这是因为display:inline-block;默认有一个间距，消除这个间距的办法有很多，常见的就有加上font-size:0;

2. 编辑内容使用contenteditable=”true”

以前的提交表单内容的思想都是用到input，textarea等等表单标签，却没有想到html元素中的属性contenteditable="true"也是一个不错的选择。

contenteditable属性兼容所有浏览器（IE6之前的版本是否兼容未测试）
在有些时候我们完全可以用DIV去替代input或者textarea来达到同样的效果，例如，在使用ajax的时候，在提交表单时我们可以获取DIV的内容。

<div contenteditable="true">可以编辑里面的内容</div>

我们可以编辑div里面的内容，再通过ajax把内容提交给后台。