改变h3元素的宽度

Question

为什么标签在chrome中显示不正确但在firefox中没有？在firefox中，baltimore这个词并没有显示在下一行。

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

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

提前感谢您的帮助。

Answer 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。

Answer 2

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

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

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

也许提供问题的图片。

（另外，我注意到更改镀铬标签时右侧滚动条的烦恼）。

Answer 3

您在名为<div>的页面上有一个featured（包含图片库），该页面向右浮动，边距为120px。发生的事情就是强迫它左边的所有内容进行换行（将背景颜色改为红色，你会看到它是如何干扰的）。您需要的是将<h3>移到post div之外，使其高于post和featured div。如果您没有这种控制级别，那么您可以通过将<span>内的<h3>的字体大小降低到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;
}