IE horizontal scroll problem
When scrolling the div the table cells move, but the cell text stays in the same position relative to the page. The cell text should scroll along with the cell even though it's in a relative div.
The problem can only be seen in IE (IE7 at least). The sample behaves correctly in Chrome and Firefox.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE Bug Demo</title>
</head>
<body>
<div style='width: 500px; height: 100px; overflow:auto'>
<table style='width: 1000px; background-color: #ff00ff;'>
<tr>
<td style='border: 3px solid black'><div style='position:relative;'>One</div></td>
<td><div style='position:relative;'>Two</div></td>
</tr>
</table>
</div>
</body>
开发者_Python百科 </html>
Any ideas?
This should do the trick:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE Bug Demo</title>
</head>
<body>
<div style="width:500px;height:100px;overflow:auto;position:relative;">
<table style="width: 1000px; background-color: #ff00ff;">
<tr>
<td style="border:3px solid black;"><div style="position:relative;">One</div></td>
<td><div style="position:relative;">Two</div></td>
</tr>
</table>
</div>
</body>
</html>
Try to remove position:relative . And keep in mind - avoid style definition in html without need. Keep them in css
DIVs in TABLE TDs don't play nice together. I would avoid this markup pattern at all costs. There is a lot of difference in the way IE and the rest handle the conflicts, and it just becomes a huge headache.
加载中,请稍侯......
精彩评论