html - 单行不隐藏滚动条？

Question

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

我的 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

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

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

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

另一个注意事项:这使得阅读评论变得极其困难。您一次只能阅读一行。

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

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