css - 溢出-x : hidden in IE11 creates vertical scrollbar

标签 css internet-explorer-11

在 Chrome 中,我有一个属性 overflow-x: hidden 在表的 td 上。当单元格的内容超出单元格时,其余内容将被隐藏。当我在 IE11 中测试这个时, 的内容被隐藏了;但是,出现了一个讨厌的垂直滚动条,我不确定为什么。这是它的样子:

enter image description here

如果我在开发工具中取消选中该属性,则垂直滚动条会消失,但是内容会溢出到行中。有什么办法可以解决这个问题吗?

最佳答案

好吧,既然你想在超出单元格空间时隐藏单元格的内容,你应该尝试使用文本溢出,例如:

<table class="custom">
  <tr>
    <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
  </tr>
    <tr>
    <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
  </tr>
</talble>

和CSS:

.custom td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

reference

关于css - 溢出-x : hidden in IE11 creates vertical scrollbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45417354/

相关文章:

css - Bootstrap 选项卡 Pane 不增长

css - 用于 IE11 和 safari 的带有文本剪辑的渐变背景

internet-explorer - 内容安全策略在 Internet Explorer 11 中不起作用

bootstrap-4 - Bootstrap 输入组在 Internet Explorer 中将表格推到屏幕宽度之外

动态创建后的 jQuery 样式/引用元素

html - 使用内联样式在背景图像中加载错误

css - 无法使用@media print 在我的打印 View 上设置字体颜色和字体粗细的样式

javascript - 滚动时缩小导航或调整大小

testing - 我无法启动 Internet Explorer 11,总是在 Windows 10 中打开 Edge

javascript - 如何从 IE 11 中的事件获取父元素的属性?