总结开发过程踩到的坑（二）

在平常工做中，时常会碰到各类各样的坑，有时真的以为不少时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，但愿本身可以跨越重重阻碍，越走越远。学会时常总结，不断提高本身。

---

本文章旨在总结开发过程当中碰到的容易忘记或者比较重要的坑，一方面加深本身对于该部分的理解，另外一方面但愿可以分享给你们，知识在于分享，固然踩过的坑也不例外（滑稽）。

目录

1. IE 绝对定位被 img 覆盖问题
2. IOS 元素点击触发高亮
3. input readyonly 点击出现光标
4. IE9 change 事件剪切删除没法触发
5. 两栏布局
6. 超出宽度横向滚动

1. IE 绝对定位被 img 覆盖问题

有这样一个场景，给浏览器插入一张 img ，其中有一些连接，经过绝对定位的办法，定位到 img 对应的位置，在chrome，firefox 中均没有问题，可是在 IE 中测试发现，连接被 img 挡住了。遇到这种问题，能够分两种方式解决。

1. 使用 css 背景图片替换 img
2. 给连接添加以下属性：
    background: url(about:blank);

2. IOS 元素点击触发高亮

-webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出如今 CSS 规范草案中。

当用户点击iOS的Safari浏览器中的连接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性能够只设置透明度。若是未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见

-webkit-tap-highlight-color：color

3. input readyonly 点击出现光标

在开发中使用了一个时间插件，设置了 input 为 readonly，在低版本（10.2） IOS中，点击 input 仍是会出现光标，尝试了不少方式，最后解决办法：

<input type="text" readonly unselectable="on" onfocus="this.blur()" value=""/>

4. IE9 change 事件剪切删除没法触发

jQuery 的 change 事件，在使用的时候，发现 IE 中剪切和删除没法触发，可使用 input propertychange 事件来代替。

5. 两栏布局（一侧固定，一侧自适应）

• 左侧定位，右侧自适应
• 左侧浮动，右侧自适应
• 左侧浮动，右侧自适应（右侧多嵌套一层）

6. 超出宽度横向滚动

一般状况下，使用 white-space 和 overflow 便可解决