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

在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。

---

本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外（滑稽）。

目录

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 即可解决