IE7 element can't be clicked
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
<span onclick='sortTable()'>1</span>
加载中,请稍侯......
精彩评论