IE8 中的最大宽度问题答案

【问题标题】：max width issue in IE8IE8 中的最大宽度问题
【发布时间】：2014-09-05 14:41:21
【问题描述】：

谁能帮我解决我在 IE8 中遇到的这个问题。下面是我的html代码-

在任何浏览器中尝试，然后在 IE8 中尝试相同

jsfiddle.net/G2C33/

输出应该是这样的

您可以看到 max width 属性在 IE8 中不起作用。

注意：在 IE8 或 IE9（IE8 标准模式）中试试这个。如果您在 IE9 版本之后尝试此操作，那么这将工作，因为之后更改了渲染引擎。 JS Fiddle 将强制在 IE9 标准模式下运行文档。所以把它复制到 .html 文件中试试。

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<style>
.first {
    width: auto !important;
    white-space: nowrap;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.test{
    width : auto;
    max-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.second {
}

td {
    border: 1px solid red;
}
</style>
</head>
<body>
<table>
    <tr>
        <td><ul>
            <li class="first"><div class="test">a very long content goes over</div></li>
            <li class="first"><div class="test">a very long content goes over here in this table cell and column a very long content goes over here in this table cell and column</div></li>
        </ul>
        </td>
        <td class="second"> 
            a very long content goes over here in this table cell and column a very long content goes over here in this table cell and column
        </td>
    </tr>
</table>
</body>
</html>

对此有任何帮助

【问题讨论】：

不仅是最大宽度，还有空格：nowrap;也不能在 IE8 中工作。

标签： javascript html css internet-explorer-8 cross-browser

【解决方案1】：

IE8 确实支持 max-width 属性，但仅在首先给定宽度时才支持。因此，不要为您的班级分配一些宽度，而不是 width:auto。它会起作用的。

例如：

.test{
width: 100%;
max-width: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

【讨论】：