CSS -显示属性不按预期在IE中工作。

Question

我有两个不能工作的display规则--我不能使用IE版本< 10的display属性，我使用以下代码：

Comments(<fb:comments-count href="http://mypage"/></fb:comments-count>)

其结果是：

Comments(<fb:comments-count href="http://mypage" fb-xfbml-state="rendered" class=" fb_comments_count_zero">
    <span class="fb_comments_count">
        10
    </span>
</fb:comments-count>)

使用此css：

.fb_comments_count {
    display: inline;
}

.fb_comments_count_zero {
    display: inline;
}

它显示：

Comments(
10
)

而不是

Comments(10)

我也试过改变

display:inline

至

display:inline-block

但这不管用。

我遇到的另一个问题是当我使用display:none时。事实上，IE<10并没有隐藏我正在设计的东西，但是IE10、chrome、opera和firefox并没有这个问题。

我怎么才能解决这个问题？

我更喜欢而不使用JavaScript，因为我希望我的站点看起来很好，即使禁用了javascript。

Answer 1

您在CSS中使用的是破折号而不是下划线。

.fb-comments-count {
    display: inline;
}

尝试将其更改为：

.fb_comments_count {
    display: inline;
}

Answer 2

将不会设置它不知道的任何元素的样式。这就是为什么有一个HTML5；通知IE新的HTML5元素(将它们插入DOM中)。其他浏览器不会出现这个问题。

Answer 3

我不完全确定FBML最终是如何呈现的，但旧的IEs不识别自定义标记，也不会将css应用于它们，因此这可能是问题所在。你需要"register" the tags to the IE。

此外，您还应该避免跨度中的换行：

<span class="fb_comments_count">10</span>

这可能已经解决了您的第一个问题，如果不尝试应用white-space:nowrap;。