CSS换行只在IE中没有？

Question

小提琴：http://jsfiddle.net/wG9vu/1/

总结一下，我有一个固定宽度的div，里面有几个<p> and <img>标签。这些标签的长度基于生成的输入。所有这些都完全按照预期工作，除了左边页面的非常底部是“星和水钻”的魅力。这种魅力在IE上完美呈现，如下所示：

但是在chrome，firefox，opera和safari上，我们得到了这个：

相关div的html如下所示：

<div class="charm_thumbnail">
<img src="http://www.ddbeadworks.com/static/media/images/charms/CMSsv006.jpg" alt="Star and Rhinestone" />
<p class="charm_list_name">Star and Rhinestone</p>
<p class="charm_list_desc">Silver-tone 1/4&quot;</p>
<p id="charm_list_price">$5.00</p>
<form method="post" action="." class="cart">
<div>
    <blah blah crap related to the add to cart button>                          
</div>
</form>
</div>

标题（charm_list_name）在布局中有一行，并且描述有两行。 IE显示正确：标题适合一行，即使描述只有一行，也可以正确地重新划分空间。

在chrome和其他版本中，标题会下降到两行，因此描述的保留空间会保留，最终结果是将添加到购物车按钮开箱即用。

我试过一些浏览器重置css无济于事：除了IE之外，标题STILL继续在两行中播出。

正如你所看到的，“星和水钻”标题在IE中完全填满了可用空间，没有像素可供选择。我注意到-webkit-margin-before: 1em; -webkit-margin-after: 1em;认为我发现了问题，但没有这样的运气。我将它们都设置为0px，但没有任何反应。

任何想法我如何使IE和所有其他浏览器显示相同的宽度？我在哪里丢失像素？

以下是相关的css：

html {
     font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}

div.charm_thumbnail {
text-align:center;
float:left;
border-style: solid;
border-width: 1px;
border-color: #b78e18;
padding: 3px;
margin: 7px 4px;
height: 210px;
width: 120px;
 }
.charm_sold_out {
    position: absolute;
    background: #841075;
    color: white;
    margin: 10px 0px 0px 6px;
    padding: 4px 16px;
    font-size: 14px;
}

.charm_thumbnail > img {
    margin-bottom: 10px;
}

.charm_thumbnail > p {
    max-width: 114px;
}
.charm_thumbnail > .charm_list_name {
    text-align: left;
    font-size: 11px;
    margin: 0px 3px;
}
.charm_thumbnail > .charm_list_desc {
    text-align: left;
    font-size: 11px;
    height: 30px;
    margin: 0px 3px;
}

.charm_thumbnail > #charm_list_price {
    text-align: left;
    font-weight: bold;
    color: #b78e18;
    margin: 0px 3px;
}

#add_charm_to_cart {
    margin-top: 10px;
}

重要编辑：我包含了我的html css行，因为我认为它与不同浏览器上的字体缩放有关。任何人都知道是否会导致这样的事情？由于100%/1.4？

而舍入而不是下降

注意：在小提琴中，我没有重现完整的错误，但这并不重要。重要的是，在chrome和其他方面，标题分为两行，这就是问题所在。

Answer 1

尝试将white-space: nowrap;添加到.charm_list_name班级：

.charm_list_name {
  text-align: left;
  font-size: 11px;
  margin: 0px 0px;
  white-space: nowrap;
}