html - 浮动左跨度和 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>

希望这可以帮助！