Question

我遇到了不同浏览器的特殊文本行为。我不能说3中的哪个浏览器表现得特别奇怪。在我提出问题的详细信息之前，请让我说明我遇到的问题..

输出::

enter image description here

布局格式::

enter image description here

现在相应的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作为我的模板

Answer 1

这里的问题是包含H4元素的div没有在Chrome中以足够大的宽度渲染，以在单行上显示H4并且文本正在换行。 OP表示这实际上是预期的效果，因此我建议手动添加换行符以强制H4在所需点处断开。

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

最终为OP工作了：

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

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

1 个答案: