浮动左跨度和div

Question

我有这个问题： http://liberainformazione.it/

标题css规则：

p.right_sidebar_title {
font-size: 16px!important;
font-weight: bold;
color: black;
margin: 7px 0!important;
line-height: 18px!important;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
width: 300px;
}

蓝色矩形css规则：

.post-category-rightSidebar {
background: #369;
display: inline;
float: left;
font-size: 10px;
height: 16px;
line-height: 17px;
margin-right: 5px;
padding: 0 5px;
text-transform: uppercase;
color: white;
}

在Chrome或Firefox中，蓝色矩形靠近标题但是IE标题在新行..... 我不明白为什么IE不能识别我的css规则。

我做错了什么？ 非常感谢。

Answer 1

您的页面有<meta http-equiv="X-UA-Compatible" content="IE=7" />，因此IE9作为IE7运行。

在IE7中，指定width或（height）值会触发所谓的hasLayout，这会使元素框有些孤立，并防止其内容被任何外部元素浮动。

您应该将X-UA-Compatible元元素设置为IE=edge值（最佳选项），或从width: 300px;规则中删除p.right_sidebar_title，或者为包含的容器指定此宽度 p.right_sidebar_title元素和浮动颜色方块。

Answer 2

我注意到p.right_sidebar_title上没有浮动广告，请尝试添加float: left;。

如果有帮助，我会将p.right_sidebar_title和.post-category-rightSidebar放在他们自己的div中：

<div>
    <div class="post-category-rightSidebar"></div>
    <p class="right_sidebar_title">Title</p>
</div>

希望这有帮助！