IE 8溢出:隐藏和最大宽度
qav*_*vid 9 html css internet-explorer
我想在表格中显示文字,我希望在宽度大于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或设置固定宽度可以这样做吗？
不幸的是,IE7和IE8对max-widthcss规则有很大的支持.所以不,没有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/