Question

我有两个内部容器块。一个是内联块，第二个是块右浮。在IE7中，浮动右侧块在容器外面。

当我更换容器内的块时，一切都将落实到位。

如何解释这种行为？

也许是一个没有改变块的解决方案？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="chrome=1" http-equiv="X-UA-Compatible">
<style>
html, body {
    padding: 0;
    margin: 0;
}

.header_text {
    color: #fff;
    font-size: 11px;
    height: 19px;
    line-height: 19px;
    background: green;
}

.text {
    padding-left: 10px;
}

.user_info {
    float: right;
    color: #fff;
    padding-right: 10px;
    background: red;
}

.clear {
    clear: both;
    height: 0;
    font-size: none;
    line-height: 0;
}
</style>
</head>
<body>
    <div class="header_text">
        <span class="text">Text</span>
        <div class="user_info">Hi, <a href="#">Text</a> [ <a href="#">Text</a>]</div>
        <div class="clear"></div>
    </div>  
</body>
</html>

enter image description here

Answer 1

使用div而不是span。

<div class="text">Text</div>

浮右块IE7错误

1 个答案: