浮動左跨度和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 對此。

如果有幫助，我會將p.right_sidebar_title和.post-category-rightSidebar放在自己的div中：

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

希望這可以幫助！