Question

有人可以帮我解决我在IE8中遇到的这个问题。下面是我的HTML代码 -

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

jsfiddle.net/G2C33 /

输出应该是这样的 this is how it suppose to work

你可以看到最大宽度属性在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>

对此有任何帮助

Answer 1

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

例如：

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

IE8中的最大宽度问题

1 个答案: