更改 h3 元素的宽度答案

【问题标题】：change width on h3 element更改 h3 元素的宽度
【发布时间】：2011-11-24 08:21:35
【问题描述】：

为什么标签在 chrome 中显示不正确，而在 Firefox 中却没有？在 Firefox 中，单词 baltimore 不会显示在下一行。

<h3>Hill’s Garage<br>
<span> Nissan and Infiniti Mechanic in Baltimore</span></h3>

这是有问题的页面。 http://hillsgarage.net/wpdir

提前感谢您的帮助。

【问题讨论】：

@Krister Andersson：为什么不呢？这没有什么问题。
不，你说得对，我只是这样=)
@Kelbizzle 你解决了吗？
@JonathonG 不，还没有。我刚刚在 Windows 计算机上的 chrome 上检查了它，但无法重现该问题。不用说，我现在很头疼。
如果我将 #featured {margin-right: -10px;} 更改为 -20 似乎可以解决问题。

标签： css cross-browser positioning

【解决方案1】：

它们在我看来也一样。这可能是一个特定的版本问题。

但是，我猜它可能与将<br> 嵌套在<h3> 内以及将<span> 嵌套在其中有关。

你应该使用类似的东西

<h3>Hill’s Garage</h3>
<span> Nissan and Infiniti Mechanic in Baltimore</span>

或

<h3>Hill’s Garage</h3>
<h4>Nissan and Infiniti Mechanic in Baltimore</h4>

至少，其中一种方法很可能会解决这个问题，即使我不确定是什么原因造成的。

此外，您应该始终关闭您的 <br> 标签，如下所示：<br/>

如果您想确保只有该跨度受您的样式规则影响，您还可以为跨度分配一个类或 id。

【讨论】：

同意始终关闭<br/>。但是，由于浮动到右侧的图片库将内容拆分为<h3> 和<h4>，因此无法解决此页面上的问题。

【解决方案2】：

在我看来 Chrome 是正确的，FF 和 IE 也是如此。

.body1 h3 span {
font: normal 14px Arial, Helvetica, sans-serif;
color: #898989;
}

你应该把你的 H3 移到车库的尽头。

也许提供您的问题的图像。

（另外，我注意到在更改 chrome 选项卡时您的右侧滚动条很烦人）。

【讨论】：

【解决方案3】：

您在名为featured（包含图片库）的页面上有一个<div>，它向右浮动，顶部边距为120 像素。正在发生的事情是这迫使它左侧的所有东西都包裹起来（将背景颜色更改为红色，您将看到这是如何干扰的）。您需要将<h3> 移到post div 之外，使其位于post 和featured div 之上。如果您没有这种级别的控制，那么您可以通过将<h3> 内的<span> 的字体大小降低到13px 来获得结果

你现在拥有的：

<div id="featured">...images...</div>
<div class="post">
  <div class="entry">
    <div class="body_resize">
      <div class="body1">
         <h3 style="position: relative;">Hill’s Garage<span><br>
         Nissan and Infiniti Mechanic in Baltimore</span></h3>
      </div>
    </div>
  </div>
</div>

#featured {
  float: right;
  padding-bottom: 20px;
  margin-right: -10px;
  padding-top: 120px;
}

.body1 h3 span {
  font: normal 14px Arial, Helvetica, sans-serif;
  color: #898989;
}

【讨论】：