Microsoft Edge CSS文本对齐

Question

只有我或者Windows 10 Edge浏览器中存在相当烦人的错误吗？

我刚刚意识到text-align在Edge中没有按预期工作。

我有

<div style='text-align:justify;'>
<h3> This is a short text </h3>
<div class='small_box'>some content </div>
<div class='small_box'>some content </div>
<div class='small_box'>some content </div>
etc...
<div class='small_box'>some content </div>
</div>

这通常会产生使子div在父div内进行对齐，并且H3（header）的宽度远低于父div的宽度，以便与左对齐，适用于所有浏览器，但是边缘，H3的整个内容被拉伸以匹配父级的宽度，使得字母之间的距离非常大。

我做了一些测试，看起来它只对某些html元素有这种奇怪的行为：标题（h1,h2,h3），span和div。如果我使用段落<p>而不是标题，那么它会按预期显示。

可以看到临时链接here我也会很快创建一个小提琴手并更新链接以供将来参考。

我是否正确地说这是微软发布的新浏览器中的错误？

Answer 1

我自己的愚蠢。

我领导一个继承的属性：text-justify: distribute-all-lines我省略了。根据属性的定义，这将使文本的最后一行拉伸到父级的宽度。 IE 9,10,11仅在文本有多行时应用它，但看起来Edge将它应用到最后一行，无论最后一行是同一行还是第一行。

重新阅读MSDN documentation我必须同意Edge的行为，但这就提出了一个问题，为什么它在IE 9,10,11中有所不同？

别介意另一个微软的怪癖。

结束问题。

Answer 2

尝试使用向左和向右填充

 .box-div {    
   height: 80vh;
   overflow-y: scroll;
   background-color: whitesmoke;
   padding-left: 10%;
   padding-right: 10%;
 }