浮动左跨度和 div答案

【问题标题】：float left span and div浮动左跨度和 div
【发布时间】：2013-01-03 01:50:13
【问题描述】：

标题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 规则。

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

【问题讨论】：

标签： html css internet-explorer google-chrome css-float

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

希望这会有所帮助！

【讨论】：