无法用简单的HTML覆盖text-align:justify和text-align:left

Question

text-align: left在元素继承了justify属性之后,我有一个奇怪的问题.我甚至尝试使用!important关键字,它仍然无效.奇怪的是,如果我在Chrome中使用开发者模式,它表示 text-align: left处于活动状态,text-align: justify处于非活动状态,但它不会渲染左对齐.

这是我的代码:https: //jsfiddle.net/h0vx9sLc/3/ (更新了小提琴"修复")

body { width: 100px; }
p:nth-child(1) {  }
p:nth-child(2) { text-align: justify; }
p>span { text-align: left !important; }

<p>
    <span>Testing Blah Blah Blah Blah Blah</span>
</p>
<p>
    <span>Testing Blah Blah Blah Blah Blah</span>
</p>

基于CSS优先级,该justify属性的优先级确实不高于left.我在Chrome,Firefox和IE中对此进行了测试,所有人都在做同样的事情.

以下是Chrome声明左侧属性处于活动状态的屏幕截图,但事实并非如此.

Answer 1

好的，这是CSS的一个非常奇怪的属性。

我借助以下问题弄清楚了： 文本对齐对齐，无法覆盖

显然，内联元素IGNORES文本对齐CSS，但是可以继承它们。所以我的SPAN继承了理由，但是CSS渲染了IGNORES，它是内联元素的文本对齐CSS。

要解决此问题，请添加display: inline-block;到我的跨度中。真的，真的很奇怪。我不确定该如何解决Chrome开发者问题。我想从技术上讲应该是个错误？