IE 8 溢出：隐藏和最大宽度答案

【问题标题】：IE 8 overflow: hidden and max-widthIE 8 溢出：隐藏和最大宽度
【发布时间】：2011-12-13 23:34:59
【问题描述】：

我想在表格中显示文本，当它的宽度超过 150px 时我想剪切它，但我不想固定表格单元格的宽度（如果没有文本，宽度将为 0px）。在 IE9、Firefox、Chrome、Opera 中一切正常，但在 IE8 中不可用。

IE8中的代码示例：

Chrome 中的代码示例：

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
td, span {
    border: 1px solid red;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span {
    border: 1px solid green;
    display: block;
}
</style>
</head>
<body>
<table>
<tr>
    <td><span>Works in Firefox, Chrome, Opera, IE 7/9 (but not in IE 8)</span></td>
    <td>Works in Firefox, Chrome (and Opera but no dots)</td>
    <td style="display: block">Works in Firefox, Chrome and Opera (with dots)</td>
</tr>
</table>
</body>
</html>

是否可以在没有任何 javascript 或设置固定宽度的情况下这样做？

【问题讨论】：

坦率地说，如果我是你，我只会在有人用 IE8 打开你的页面时发送一个 javascript 警报。不要费心让你的页面与有缺陷的 IE 浏览器兼容，这是微软的错，不是你的。
关于第一个单元格，它似乎在 IE7 中不起作用。恐怕它只适用于 IE9。
@IntermediateHacker 根据 CSS 2.1 规范，最大宽度对表格单元格的影响是未定义的。规范有问题，不是微软。
好的，抱歉。在 IE 7 中它不起作用。没关系，我只支持IE 8、IE9

标签： html css internet-explorer

【解决方案1】：

不幸的是，IE7 和 IE8 对max-width css 规则的支持非常错误。所以不，如果没有 javascript 或固定宽度，您将无法可靠地做到这一点。如果有帮助，您拥有的代码应该在 IE 7+ 中工作。

但是您可以通过在上面的规则之后添加条件 css 规则来使其仅固定这两个浏览器的宽度：

<!--[if lte IE 8]>
    <style>
    td, span {
        width: 150px;
    }
    </style>
<![endif]-->

当您稍后将 css 移动到外部文件中时，您当然会将其更改为链接标记：

<!--[if lte IE 8]>
   <link rel="stylesheet" type="text/css" href="ie8.css" />
 <![endif]-->

或者，您可以使用 javascript 检测 IE 7 和 8 并将用户重定向到此页面：http://www.mozilla.org/de/firefox/new/

【讨论】：

maxWidth 是在 Windows Internet Explorer 7 中引入的。
是的，这绝对正确，我会更正。但是，正如这个问题中的代码所示，它在 IE 7 和 8 中非常有问题。我亲眼目睹了这在一台计算机上工作（在 IE 7/8 中），但在另一台计算机上却没有。正如 lorenzo-s 指出的那样，这对他也不起作用。它很可能依赖于更新，但无论出于何种原因，在这些浏览器中显然不应该依赖它。