html - CSS 换行符仅不在 IE 中？

Question

fiddle :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 中，“Star and Rhinestone”标题完全填满了可用空间，没有一个像素可以备用。我注意到 -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 而四舍五入而不是向下舍入。 ？

注意:在 fiddle 中，我没有重现完整的错误，但这并不重要。重要的是，在 chrome 和其他浏览器中，标题分两行，这就是问题所在。

Answer 1

尝试将 white-space: nowrap; 添加到您的 .charm_list_name 类:

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