html - 对于此表,溢出和省略号在 IE 中不起作用

标签 html css cross-browser

FF v14 具有我正在寻找的外观。 IE9 不 overflow hidden 也不显示省略号。我怎样才能解决这个问题以在 IE9 中工作?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <style type="text/css">
    .col
    {
        max-width:10em;overflow:hidden;text-overflow:ellipsis;
    }
    .row
    {

    }
    .table
    {
        white-space: nowrap;
    }
    </style>
</head>
<body>
<table class="table">
    <tr class="row">
        <td class="col">This is some text in row 1 column 1</td>
        <td class="col">This is what it looks like in row 1 column 2</td>
    </tr>
    <tr class="row">
        <td class="col">here is row 2 column 2</td>
    </tr>
</table>
</body>
</html>

更新
我注意到 visual studio 中的验证错误:

Validation (CSS 2.1): 'text-overflow' is not a known CSS property name.

这是否意味着我需要以某种方式明确指定更高版本的 CSS?如果是,如何?

Fiddle

最佳答案

我想到的唯一解决方案是将单元格的内容包装在 DIV 中:

        <td><div class="col">This is some text in row 1 column 1</div></td>

有点乱,但它似乎在 IE、Chrome、FF 和 Safari 中工作。

关于html - 对于此表,溢出和省略号在 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11829625/

相关文章:

javascript - 使弹出窗口具有智能定位

html - 是否可以向 Bootstrap 事件选项卡添加箭头?

html - Firefox 和 Safari 之间的行高差异

javascript - 在文本框中按 enter 不会触发 firefox 中提交按钮的 onclick 事件

css - body { 字体大小 : 100. 01%; } vs body { 字体大小 : 100%; }?

javascript - 占位符在文本区域中不起作用

javascript - Ruby on Rails 和 Jquery : trying to switch characters after submit

html - 当我单击复选框时不显示标记为选中,反之亦然

jquery - 过多的边框/填充出现在我的 html 底部

html - Flexbox 图像缩放到高度并保持纵横比