總結開發過程踩到的坑（二）

在平常工做中，時常會碰到各類各樣的坑，有時真的以爲不少時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上，但願本身可以跨越重重阻礙，越走越遠。學會時常總結，不斷提高本身。

---

本文章旨在總結開發過程當中碰到的容易忘記或者比較重要的坑，一方面加深本身對於該部分的理解，另外一方面但願可以分享給你們，知識在於分享，固然踩過的坑也不例外（滑稽）。

目錄

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 便可解決