html - 向左浮动 span 和 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这使得元素的盒子有些孤立，并防止其内容被任何外部元素 float 。

您应该设置 X-UA-Compatible元元素到 IE=edge 值(最佳选项)，或删除 width: 300px;来自 p.right_sidebar_title规则，或为包含两者 的容器指定此宽度 p.right_sidebar_title元素和 float 颜色方 block 。