Я надеюсь, что кто-то сможет помочь мне здесь. Я постарался максимально упростить свой пример.
У меня есть абсолютно позиционированный DIV, который я для этого примера заполнил в окне браузера. Этот div имеет атрибут overflow: auto для предоставления полос прокрутки, когда содержимое слишком велико для отображения DIV.
В DIV у меня есть таблица для представления некоторых данных, и ее ширина составляет 100%.
Когда содержимое становится слишком большим по вертикали, я ожидаю, что появится вертикальная полоса прокрутки и таблица немного сузится по горизонтали, чтобы вместить полосу прокрутки. Однако в IE7 также появляется горизонтальная полоса прокрутки, несмотря на то, что по-прежнему имеется достаточно места по горизонтали для всего содержимого в div.
Это специфично для IE - Firefox отлично работает.
Полный источник ниже. Любая помощь с благодарностью.
Tony
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Table sizing bug?</title>
<style>
#maxsize
{
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
border: 5px solid silver;
overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="maxsize">
<p>This will be fine until such time as the vertical size forces a
vertical scroll bar. At this point I'd expect the table to re-size
to now take into account of the new vertical scroll bar. Instead,
IE7 keeps the table the full size and introduces a horizontal
scroll bar.
</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
</tr>
</tbody>
</table>
<p>Resize the browser window vertically so this content doesn't
fit any more</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
</div>
</form>
</body>
</html>
добавлено 16.03.10 ... подумал, что было бы интересно указать, что исходный код GWT указывает на этот вопрос в комментарии ... http://www.google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.java&q=%22hack%20to%20account%20for%20the%22%20scrollpanel&sa=N&cd=1&ct=rc&l=48