滚动条不隐藏单行？答案

【问题标题】：Scroll bar does not hide for single line?滚动条不隐藏单行？
【发布时间】：2015-12-05 04:20:49
【问题描述】：

我有一个表格，其中特定的<td> 将包含动态文本。当存在多行时，它应该滚动。所以我使用了overflow:auto 属性。但即使内容没有溢出，滚动条也是可见的。它始终可见。

我的 PHP 代码是：

printf( '<table class="scroll-table">' );
printf( '<tr><td>..</td>');
printf( '<td ><div style="float: left"><strong>Comment:</strong></div> <div class="scroll">%s</div></td>',$info['comment'] );

CSS 属性：

.scroll-table{
    table-layout: fixed;
}
.scroll-table td{
    width:33%;
    padding-right:4px;
}
.scroll{
    white-space: normal;
    overflow: auto;
    height: 1em;
    line-height: 1em;
    width: 20em;

我的代码有什么问题？

【问题讨论】：

PHP 与这个问题完全无关，所以不要发布 PHP 发布 PHP 生成的 HTML。

标签： html css scrollbar

【解决方案1】：

尝试改变这一行

printf( '<td ><div style="float: left"><strong>Comment:</strong></div> <div class="scroll">%s</div></td>',$info['comment'] );

由

printf( '<td ><div style="float: left"><strong>Comment:</strong></div> <div class="scroll">%s</div></td></tr></table>',$info['comment'] );

检查以关闭您打开的所有标签:)

【讨论】：

【解决方案2】：

这是因为 1em 只是文本大小，您必须设置填充，例如0.125em，然后线条大小为 1.5em。确保使用 box-sizing:border-box。

【讨论】：

【解决方案3】：

我在三个浏览器中检查了你的代码，这是结果

Firefox 40.0.3 = 正常
Chrome 45.0.2454.85 = 正常
IE 11.0.9600.17905 = 滚动条

这是 IE 的固有行为，但是您可以在 CSS 中将 height: 1em; 更改为 height: 1.1em; 并让滚动条在 IE 中消失。

另一个注意事项：这使得读取 cmets 变得非常困难。您一次只能阅读一行。

您可以在您的 CSS 中使用 height: auto; 为 .scroll 使多行 cmets 更易于阅读，但随后使用 IE 会返回滚动条（即使只有一行）。 IE只是玩得不太好。这是程序员的噩梦。

也不要忘记像 Fky 所说的那样关闭标签，但这对滚动条没有影响。不过，很好的建议。

【讨论】：

哇..它与height: 1em;一起工作..谢谢Kuya..我也在研究多行..根据您的建议，如果我们使用height:auto，它将增加行高.由于我的表格没有表格边框，不需要的空间在页面中看起来不会很好看..请让我知道如何做到这一点。（提高可读性以及不增加行大小）
这很难说。我需要查看页面的 html 代码。只是猜测你可能会使用一个“浮动”的 div，而不是移动页面的其余部分。但这只是一个猜测，没有看到你的 html。