0

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

总而言之，我有一个固定宽度的 div，<p> and <img>里面有几个标签。这些标签的长度基于生成的输入。除了左侧页面的最底部是“星星和莱茵石”魅力之外，所有这些都完全按照预期工作。该魅力在 IE 上完美呈现，如下所示：

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 之外，标题仍然持续到两行。

如您所见，“星星和莱茵石”标题在 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 和其他人中，标题跑到两行，这就是问题所在。

4

1 回答 1

2

尝试添加white-space: nowrap;到您的.charm_list_name课程中：

.charm_list_name {
  text-align: left;
  font-size: 11px;
  margin: 0px 0px;
  white-space: nowrap;
}
于 2013-09-16T17:58:11.990 回答