Làm cách nào để tạo một thẻ neo rỗng trong IE7?

Question

Tôi cần tạo vùng trong hình nền có thể nhấp để tạo sự kiện để sử dụng JavaScript. Vì vậy, tôi đã tạo ra một thẻ neo và bên trong mà tôi đưa vào một số văn bản liên quan giữa các thẻ ngữ nghĩa vô nghĩa mà tôi sau đó khiến ẩn:

<a href="#"><i>foo</i></a> 

Sau đó, tôi đưa thẻ neo 'display: block' tài sản, giá trị chiều rộng và chiều cao, và hoàn toàn định vị nó ở nơi tôi cần nó liên quan đến hình nền. Trong Firefox, điều này hoạt động độc đáo - tôi di chuột qua và con trỏ của tôi thay đổi như mong đợi - Tôi có thứ gì đó có thể nhấp. IE7 tuy nhiên, không thích thực tế là thẻ neo là 'rỗng' và do đó không xử lý nó như là có thể click. Vì vậy, tôi đã thêm thẻ này vào thẻ liên kết trong css:

background:url(/no-image.jpg); 

... dường như đánh lừa IE7 giả định có điều gì đó ở đó. IE7 bây giờ coi khu vực này là có thể nhấp, ngay cả khi không có hình nền thực sự tồn tại cho thẻ neo. Nhưng điều này có vẻ như một chút của một hack với tôi và tôi tự hỏi nếu có một cách thanh lịch hơn để đối phó với vấn đề này. bất kì ý kiến ​​nào đều được đánh giá cao. Cảm ơn.

Answer 1

Loại bỏ các thẻ vô nghĩa ngữ nghĩa và sử dụng thay thế hình ảnh CSS thông thường thay thế.

<a href="#">foo</a> 

Và sau đó CSS:

a { 
    width:100px; 
    height:100px; 
    display:block; 
    text-indent:-9999px; 
    background:url(/img.png) no-repeat; 
} 

Thêm bất cứ vị trí bạn cần, và nó sẽ chỉ làm việc tốt.

Answer 2

Thay vào đó, hãy thực hiện DIV có thể nhấp. Nếu nó đang gọi JavaScript, bạn không cần một thẻ neo nào cả.

Bạn hoàn toàn có thể định vị nếu cần.

<div onclick="alert('moo')" style="height;100px;width:100px;cursor:pointer"></div> 

Answer 3

Bạn đã tìm thấy sự cố hiển thị với IE và theo @Simon bên dưới sự cố vẫn tồn tại ít nhất thông qua IE9.

Hack background: của bạn sẽ hoạt động, nhưng trình duyệt sẽ thực hiện yêu cầu HTTP mỗi lần để giải quyết URL không có thật. Điều này có thể làm tổn thương hiệu suất của trang của bạn. Để đạt được kết quả tương tự nhưng không thực hiện một yêu cầu HTTP không cần thiết, tôi muốn đề nghị sử dụng URL này thay vì:

background-image:url(about:blank); 

about:blank là một URL đặc biệt mà các trình duyệt hiển thị dưới dạng một trang trống, vì vậy nó sẽ không ảnh hưởng như thế nào phần tử được hiển thị, nhưng nó cũng sẽ không thực hiện bất kỳ yêu cầu HTTP nào.

BTW, sự cố chỉ xảy ra khi bạn có một phần tử A hoàn toàn hoặc tương đối vị trí (hoặc phần tử A bên trong một khối vị trí). Các liên kết không định vị thường xuyên dường như không có vấn đề này trong IE7.

Answer 4

Tôi đã gặp sự cố trong IE9 và bên dưới gần đây, nơi khu vực có thể nhấp xung quanh thẻ liên kết không hoạt động. Không có giải pháp điển hình nào phù hợp với tôi. Những gì tôi thấy đã làm việc đã thêm kiểu này vào phần tử html:

html { 
position:relative; 
z-index:-1001; 
} 

Thứ tự z-index khác với IE so với các trình duyệt khác.