单行不隐藏滚动条？

Question

我有一个 table，其中特定的 <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;

我的代码有什么问题？

Answer 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'] );

选中以关闭您打开的所有标签:)

Answer 2

因为1em只是文字大小，你必须设置padding e.g. 0.125em 然后线宽为1.5em。确保使用 box-sizing:border-box.

Answer 3

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

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

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

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

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

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

单行不隐藏滚动条？

Scroll bar does not hide for single line?

html

css

scrollbar