關於在IE中a標籤設定絕對定位和寬高之後卻點選沒有反應的解決方案
阿新 • • 發佈：2019-01-23
最近做了一個頁面，是一張大的背景圖，在背景圖上面有幾個表單元素，程式碼結構大致如下：
DIV使用相對定位，表單元素使用絕對定位。<div class="huishi" id="form1" style="background:url(images/huishi_bg.png) no-repeat;"> <input type="text" value="" name="year" id="year"/> <input type="text" value="" name="month" id="month"/> <input type="text" value="" name="day" id="day"/> </div>
後來產品希望背景圖能點選，於是在在背景圖上面加了一個超連結a，程式碼如下：
<div class="huishi" id="form1" style="background:url(images/huishi_bg.png) no-repeat;"> <a href="http://www.baidu.com/" target="_blank" style="display:block; width:555px; height:395px; position:absolute; left:0; top:0; z-index:0;"></a> <input type="text" value="" name="year" id="year"/> <input type="text" value="" name="month" id="month"/> <input type="text" value="" name="day" id="day"/> </div>
後來測試發現在IE下面點選無響應。其它瀏覽器沒事。
在試驗了無數種方式之後，還是不行，最後求助於百度，於是找到了答案。
以下是從網上摘錄下來的部分，為了防止以後再遇到此類問題，也為了怕自己忘記，特此記錄一下。
造成問題的原因如下：
元素絕對定位以後設定了高寬等原因：
1、元素內並無內容
2、背景是透明的，無任何背景圖或者顏色
解決方法：
1、如果不是絕對定位元素的，可以用相對定位
2、給元素加透明的背景圖，或者給元素加背景顏色，然後設定透明度為0
3、IE可以只用 background:url(about:blank) 解決
第三種方法平時用用是可以的，但是在某種情況下會有bug, 比如JS拖動層時候，拖動的
事件在一個透明層上面，你有設定了其他滑鼠游標，這時候拖動就會出現游標閃爍的現象！
這裡建議第二種方法，弄一個1*1PX的透明圖就好！