chrome/IE 11/firefox 中的奇怪文本行为答案

【问题标题】：odd text behavior in chrome/IE 11/ firefoxchrome/IE 11/firefox 中的奇怪文本行为
【发布时间】：2014-06-25 00:07:52
【问题描述】：

我在使用不同浏览器时遇到了一种特殊的文本行为。我不能说 3 中的哪个浏览器表现特别。在我给出我的问题的细节之前，让我说明我遇到的问题..

输出::

布局格式::

现在对应的css代码如下::

 #feature_links_inner_block {
            width: 205px;
            height: 390px;
            margin: 0 auto;
        }
        #side_nav_links {
            width: 99%;
            height: 375px;
            margin: 0 auto;
        }
        .one_third_side_nav_block {
            width: 100%;
            height: 125px;
        }
        .one_third_side_nav_block h4 {
            margin: 3px 0px 0px;
            padding: 0;
            font-family: "marcellus sc";
            font-size: 19px;
            color: #f1d000;
            text-align: center;
        }
        .one_third_side_nav_block img {
            float: left;
            margin: 1px 3px 0px 1px;
        }
        .one_third_side_nav_block p {
            margin: 3px 0px 5px 0px;
            font-family: "trebuchet ms",Arimo, sans-serif;
            font-size: 14px;
            color: #fff;
        }

HTML::

<div id="feature_links_inner_block">

     <div id="side_nav_links">
        ....
        <a href="news_media_blurbs.html">
            <div class="one_third_side_nav_block white_bottom_border">
                 <h4>News, Media &amp; Blurbs</h4>
                 <img src="../Images/png/apply.png" alt="News and Media image" />
                 <p>What is happening now?</p>
            </div>
        </a>
        ...
     </div>
 </div>

我正在尝试找出导致这种情况发生的原因。它的代码相同，但呈现不同。我试图查看每个浏览器中的计算值，但它们似乎都是一样的。如果有人想要它，我会将 chrome 和 firefox 的计算值复制为文本文件。

理想情况下，我希望最终输出看起来像 chrome 输出。这只是页面的一小部分。我在页面中的其他部分遇到了类似的问题。

chrome 渲染是否正确而其余 2 不是？还是相反？

感谢任何帮助。提前致谢

附录::: 我忘了说我使用 HTML5-Boilerplate 作为我的模板

【问题讨论】：

如果你想让它看起来像 Chrome 输出，只需在 H4 中的 & 符号和单词“Blurbs”之间添加一个换行符 <br/>：<h4>News, Media &amp;<br/> Blurbs</h4>
这会增加 chrome 输出的平衡
然后呢？它会产生完全相同的效果。它在所有浏览器中都是统一的，而不是只在 Chrome 中显示。
谢谢。这确实解决了问题。但出于好奇，为什么 chrome 不处理那个额外的“break”标签？或者更好的是，为什么 chrome 甚至在引入标记以使其他浏览器的输出相同之前使用“中断”呈现代码？
不是。基本上发生的事情是 Chrome 正在检测与其他浏览器不同的宽度，用于包含 div 的宽度，该宽度不足以在一行中容纳整个 H4，因此正在包装文本。通过手动添加换行符，您基本上只是在所需点强制文本换行，使其在所有浏览器中看起来都相同。如果您希望将所有 H4 文本放在一行上，我会建议将字体大小减小一个点，这可能会允许 H4 在所有浏览器中放在一行上。

标签： html css internet-explorer google-chrome firefox

【解决方案1】：

这里的问题是包含 H4 元素的 div 在 Chrome 中呈现的宽度不够大，无法在单行上显示 H4，并且文本被换行。 OP说这实际上是想要的效果，所以我建议手动添加换行符以强制H4在所需的点处中断。

如果 OP 希望 H4 保持在一行上，他们也可以将字体大小减小一到两点，以使 H4 有足够的空间在所有浏览器的一行上存在。

这最终为 OP 工作：

<h4>News, Media &amp;<br/>Blurbs</h4>

【讨论】：