微软边缘 CSS text-align

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>

这通常会产生使 child div 在 parent div 和宽度很大的 H3 (header) 内对齐低于 parent div 的宽度以左对齐，适用于所有浏览器，但在 Edge 中，H3 的整个内容被拉伸以匹配 parent 的宽度, 使字母之间的距离很大。

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

可以看到一个临时的linkhere我很快也会创建一个fiddler并更新link以供将来参考

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

Answer 1

我自己的愚蠢。

I head an inherited 属性: 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%;
 }

微软边缘 CSS text-align

Microsoft Edge CSS text-align

html

css

microsoft-edge