在一样平常工作中，经常会碰到林林总总的坑，偶然真的以为许多时刻开辟的履历都是踩坑踩出来的。在通往大牛的道路上，愿望本身能够逾越重重障碍，越走越远。学会经常总结，不停提拔本身。

本文章旨在总结开辟过程当中碰到的轻易遗忘或许比较主要的坑，一方面加深本身关于该部份的明白，另一方面愿望能够分享给人人，学问在于分享，固然踩过的坑也不破例（诙谐）。

目次

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 即可处理