IE7 element can't be clicked_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-14 18:32 出处：网络

I\'ve narrowed a defect down to this sample, where the numeral \"1\" is unclickable in IE7 (only): <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtm

I've narrowed a defect down to this sample, where the numeral "1" is unclickable in IE7 (only):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Click 1</title>
    <style type="text/css">     
        div   { position: absolute; overflow: auto; }
        table { position: relative; }
        span  { position: fixed; top: 100px; }
    </style>
</head><body>
    <div>
        <table>
            <tr>
                <span onclick='alert(1)'>1</span>2
            </tr>
        </table>
    </div>
</body></html>

Can anyone identify the root cause, so I understand my options for workarounds?

I'm using all the CSS represented here to build a sortable fixed head scrolling table. In the original code, the span actually lives in a TH, fixing the headings above the scrolling tabl开发者_JAVA百科e via negative margin, while allowing the table renderer to account for the header text in column width, without table duplication or 'onResize'-simulating timers.

Removing position: relative from div fixes it.

If that's not an option, I also found adding *display: inline to div fixes it.

The asterisk before display is a CSS hack to apply the rule to only IE7 and below. It's not an awesome one to use because it is not valid CSS, but it works and causes no problems.

If neither of these ideas works for you, it would be helpful to see a more complete test case to understand why.

Your original code, but with <span onclick='alert(1)'> so the JavaScript works:
http://jsbin.com/aretu5 (can't click it in IE7)

Same, with position: relative removed:
http://jsbin.com/aretu5/2 (works in IE7)

Same, with position: relative still there and *display: inline added:
http://jsbin.com/aretu5/3 (works in IE7)

try to use brackets