CSS在IE8中呈现不同，就像float:right和溢出隐藏一样

<html>
<head>
<style>
.subheader
{
    float: right;
    overflow: hidden;
}
.header
{
    width:200px; 
    height:20px; 
    overflow: hidden; 
    border: 1px solid red;
}
span
{
    text-overflow: ellipsis;
    overflow:hidden;
    float:left;
    white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">
    <div class="subheader">
        <span>Hellow asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa<span>
        </div>
</div>
</body>
</html>

我想在IE8中获得与IE9相同的行为

IE9 中的结果是：Hellow asdfasdfa而在IE8中是：asdfasdfasdff(我看不到开头的凹陷(

提前感谢您的时间

添加 max-width: 100%;到.subheader部分

您的.subheader向右浮动。这意味着副标题div 将与外部标题div 的右侧对齐。如果将.subheader切换为向左浮动，则可以获得所需的效果。

此外，text-overflow: ellipsis;是CSS3，所以IE8不会自然地做到这一点。

.subheader
{
    float: left;
    overflow: hidden;
}

相关内容

最新更新

热门标签：