IE8表格table中，max-width属性被误判为实际宽度？
0
悬赏园豆：20
[已关闭问题]
关闭于 2017-01-21 14:36
二话不说，先上代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style>
*
{
margin: 0 auto;
padding: 0;
}
body
{
font: 14px/20px Microsoft YaHei, SimSun;
text-align: center;
color: #333;
background: #fff;
}
table
{
text-align: center;
border-collapse: collapse;
border-spacing: 0;
}
table th, table td
{
padding: 3px 5px;
border: 1px solid #dbdbdb;
}
.table
{
width: 800px;
}
.ellipsis
{
display: inline-block;
max-width: 132px;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
overflow: hidden;
}
</style>
</head>
<body>
<div class="table">
<table width="100%">
<thead>
<tr>
<th>课程代码</th>
<th>课程名称</th>
<th>开课部门</th>
<th>开课教研室</th>
<th>学分</th>
<th>课程类别</th>
<th>审核情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>251414</td>
<td>中国远近古代史之（1）</td>
<td><span class="ellipsis">这里的字数超10个会被截断,但是IE还是撑开了实际宽度
</span></td>
<td>历史古代教研室</td>
<td>3</td>
<td>必修课</td>
<td>审核中</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
项目要求如下：
1.兼容IE8+,而且td内的文本，超过10个字就截断，并出现省略号；
实现如下：
1.用js来控制字数并加...的方法，会加重页面加载负担，放弃了；
2.用table-fixed的方法来定平均td的方法，会限定td的宽度，美观性不好；
3.所以就想到用class="ellipsis"这个样式来实现，IE9-11以及其他浏览器正常；
问题如下：
1.唯独IE8下面，第三个td内文本虽然也截断加...符号了，但是这个td的实际宽度被撑宽了，宽度正好是所
有文字的宽度，使得这一格数据太长非常难看；
2.加上width:“11em”的话，IE8就表现正常了。但是文本没有超过10个字也会强制成10个字的宽度，所
以不太好...
想了好长时间，始终没有想到好办法，所以来求问一下各位，是否能帮忙看一下？不甚感激啊
所有回答(2)
0
最好去专业的社区问问。
0
比如一个字是12px 十个字就是120px的宽度 再加上
position: relative; overflow: hidden; text-overflow: ellipsis;
完事！
