导致水平滚动条的宽表答案

【问题标题】：Wide table causing horizontal scrollbar导致水平滚动条的宽表
【发布时间】：2010-11-18 02:53:42
【问题描述】：

我在几个嵌套的 div 中有一个表格。一列包含一个图像，其宽度使页面的总宽度比显示和水平滚动条显示更宽。

此单元格来自 asp.net ajax 弹出窗口（鼠标悬停时）并通过 javascript 隐藏，因此不需要滚动条。

有没有办法通过 css/xhtml 使滚动条不显示？我确信表格单元格的宽度会导致问题，因为当我删除它时，滚动条就消失了。图像元素嵌套在一个 div 中。我尝试了溢出：隐藏和操纵表格单元格宽度 - 都没有奏效，至少没有改变图像的宽度。

提前致谢。

【问题讨论】：

你使用的是什么 xhtml/css？或者您有我们可以查看的演示页面以提供相关建议吗？
我解决了这个问题。我添加了位置：相对于包含的 div，它也有溢出：隐藏。它在 FF 3 中正确呈现，但在 IE 7 中不正确。
在我应用修复后，它在 IE7 中正确呈现。

标签： asp.net css ajax xhtml

【解决方案1】：

我不能说我确定你为什么会得到一个带有溢出的滚动条：隐藏，但这是我用来让鼠标悬停弹出窗口的技巧：

HTML：

 <div><a href="#" class="showtooltip">Text you want visible at all times. <div
 id="tooltip">elements you want for mouse tooltip</div></a>

CSS 格式化链接：

a:link .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:active .{
//CSS
}

对于接下来我们需要为工具提示设置 CSS 的所有内容，您的 CSS 可能都是相同的：

a:link .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:visible;
//CSS to properly position and size div
}
a:active . div{
visibility:hidden;
}

然后你可以让你的 ajax 写入 document.getElementById('tooltip')

【讨论】：

【解决方案2】：

我应该提到这个问题只发生在 IE7 而不是 FF3 的事实。无论如何，以下链接说明了我遇到的错误。希望这对遇到此问题的其他人有所帮助。

http://snook.ca/archives/html_and_css/position_relative_overflow_ie/

【讨论】：